Struct Tabs 

pub struct Tabs<S, T> { /* private fields */ }

A tab list named label whose selection is the signal selected, with one panel per tab.

It follows the WAI-ARIA tabs pattern. The list has role="tablist", each tab role="tab" with aria-selected and aria-controls, and each panel role="tabpanel" labeled by its tab. Tab enters the list at the selected tab, the arrow keys, Home, and End move between tabs, and a tab is selected as it gains focus, through El::roving_focus. The ids are derived from the signal’s path and the tab’s position.

use hypersig::Signals;
use hypersig::html::p;
use hypersig_ui::Tabs;
use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize, Clone, Copy, PartialEq)]
enum Section {
    Account,
    Password,
}

#[derive(Signals, Serialize, Deserialize)]
struct Settings {
    section: Section,
}

let tabs = Tabs::new("Settings", Settings::section())
    .tab(Section::Account, "Account", p().text("Your name and email."))
    .tab(Section::Password, "Password", p().text("Change your password."));
let html = tabs.render().render();
assert!(html.contains(r#"role="tablist""#));
assert!(html.contains(r#"aria-controls="ui-section-panel-1""#));

Implementations

impl<S, T: Serialize + PartialEq> Tabs<S, T>

pub fn new(label: impl Into<String>, selected: Sig<S, T>) -> Self

An empty tab list named label for assistive technology.

pub fn tab(self, value: T, title: impl Into<String>, panel: El<S>) -> Self

Adds a tab titled title that selects value and shows panel.

pub fn render(self) -> El<S>

The tab list followed by the panels, in a <div>.

Trait Implementations

impl<S: Debug, T: Debug> Debug for Tabs<S, T>

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl<S, T: Serialize + PartialEq> From<Tabs<S, T>> for El<S>

fn from(tabs: Tabs<S, T>) -> Self

Converts to this type from the input type.

impl<S, T: Serialize + PartialEq> From<Tabs<S, T>> for Node<S>

fn from(tabs: Tabs<S, T>) -> Self

Converts to this type from the input type.