タブ

選ばれたタブをシグナルに持つタブの一覧です。タブごとに 1 つのパネルがあります。

実行結果

tabs.rs

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

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

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

pub fn page() -> Page<Settings> {
    let initial = Settings {
        section: Section::Account,
    };
    Page::new(
        "設定",
        initial,
    )
    .child(
        Tabs::new(
            "設定",
            Settings::section(),
        )
        .tab(
            Section::Account,
            "アカウント",
            p().text("名前とメールアドレスを変更します。"),
        )
        .tab(
            Section::Password,
            "パスワード",
            p().text("パスワードは 12 文字以上にしてください。"),
        )
        .tab(
            Section::Billing,
            "お支払い",
            p().text("請求書は毎月 1 日に届きます。"),
        ),
    )
}

アクセシビリティ

WAI-ARIA tabs パターンに従います。一覧は role="tablist" を持ち、各タブは role="tab" と aria-selected、aria-controls を持ちます。各パネルは role="tabpanel" を持ち、対応するタブがパネルのラベルになります。タブは El::roving_focus でフォーカスを受けると同時に選ばれます。id はシグナルのパスとタブの位置から作られます。

キー	動作
Tab	一覧の中の選ばれたタブにフォーカスを移し、もう一度押すとパネルに移します。
左矢印、右矢印	前か次のタブに移り、それを選びます。
Home、End	最初か最後のタブに移り、それを選びます。

API

項目	概要
`Tabs::new`	支援技術に向けて `label` を名前に持つ、空のタブの一覧
`tab`	`title` をタイトルに持ち、`value` を選んで `panel` を表示するタブを足します。