Tab Nav
fandhe-frontend-pre-styled-ui の tab_nav mod が提供するスタイル済み Tab Nav 部品です。
見た目は Tabs と同じ下線付き水平タブですが、意味論はページ遷移を伴う通常のナビゲーションリンク集合です。role="tablist"/role="tab" を一切出力せず、素の nav/a の暗黙 ARIA ロール（navigation/link）のみを使い、現在ページは aria-current="page" で示します。パネル切り替え UI が必要な場合は Tabs を、縦方向の文書ナビ（サイドバー用途）が必要な場合は Nav List を使ってください。
root へ size（xs/sm/md/lg/xl、既定 md）を指定できます。hover・キーボードフォーカスリングも備えます。
root_with を使うと、pill variant（TabNavVariant::Pill、Tabs の Enclosed と同一外観）・bar variant（TabNavVariant::Bar、枠線・角丸・影のカード状コンテナ + 区切り線 + 下端インジケータ）・color-palette 軸を opt-in で指定できます（既定の root は Line・palette なしのまま不変）。
Demo
pre-styled-ui 単独定義の anatomy（data-scope="tab-nav"）による静的掲示です。role="tablist"/role="tab" を出力せず、素の nav/a の暗黙 ARIA ロールのみを使います。Overview を現在ページ（aria-current="page"）として掲示しています。size 軸（既定 md、イシュー #1541）・hover・フォーカスリングも備えます。
Features
- role="tablist"/role="tab" を出力しない。素の nav/a の暗黙 ARIA ロール（navigation/link）のみを使うナビゲーションリンク集合（crates/pre-styled-ui/src/tab_nav.rs:1-20）
- 現在ページは aria-current="page" + data-current で示す（tab_nav.rs:198-209）
- 見た目は自前の宣言列から生成する（イシュー #1541 で crate::tabs との共有を解消）。size 軸（xs〜xl、既定 md）を持つ（tab_nav.rs 参照）
- root_with 経由で pill/bar variant（TabNavVariant、pill は tabs の Enclosed と同一外観、bar は枠線・角丸・影のカード状コンテナ + 区切り線 + 下端インジケータ）・color-palette 軸を opt-in 提供（イシュー #3125/#3126、tab_nav.rs 参照）
Anatomy
root
linkAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
size | Size | Md | サイズ（イシュー #1541 で追加、tab_nav.rs 参照）。 |
variant | TabNavVariant | Line | root_with のみが受け取る見た目 variant（Line/Pill/Bar、イシュー #3125/#3126、tab_nav.rs 参照）。 |
palette | Option<ColorPalette> | None | root_with のみが受け取る color-palette 軸（イシュー #3125、tab_nav.rs 参照）。 |
label | &str | — | root に付与する aria-label（必須引数、tab_nav.rs:171）。 |
href | &str | — | link の href（tab_nav.rs:198）。 |
current | bool | false | true のとき aria-current="page" + data-current を付与する（tab_nav.rs:198-209）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
link | data-current | （値なし） |
CSS Variables
| Variable | Default |
|---|---|
--fandhe-tab-nav-current-bg | transparent |
--fandhe-tab-nav-current-fg | var(--fandhe-color-fg) |
--fandhe-tab-nav-current-shadow | none |
--fandhe-tab-nav-focus-ring-offset | var(--fandhe-focus-ring-offset, 2px) |
--fandhe-tab-nav-font-size | var(--fandhe-font-font-size-sm) |
--fandhe-tab-nav-hover-bg | var(--fandhe-color-bg-muted) |
--fandhe-tab-nav-hover-fg | var(--fandhe-color-fg) |
--fandhe-tab-nav-link-border-bottom | 2px solid transparent |
--fandhe-tab-nav-link-divider | 0 |
--fandhe-tab-nav-link-flex | 0 1 auto |
--fandhe-tab-nav-link-min-width | auto |
--fandhe-tab-nav-link-overflow | visible |
--fandhe-tab-nav-link-padding | var(--fandhe-space-2) var(--fandhe-space-4) |
--fandhe-tab-nav-link-radius | var(--fandhe-radius-sm, 0.25rem) var(--fandhe-radius-sm, 0.25rem) 0 0 |
--fandhe-tab-nav-link-text-overflow | clip |
--fandhe-tab-nav-link-white-space | normal |
--fandhe-tab-nav-pill-current-bg | var(--fandhe-color-bg) |
--fandhe-tab-nav-pill-current-fg | var(--fandhe-color-fg) |
--fandhe-tab-nav-pill-current-shadow | var(--fandhe-shadow-sm) |
Examples
Three links
Tabs / Nav List / Menubar の 3 リンクのうち Tabs を現在ページとした例です。
Pill variant
root_with で TabNavVariant::Pill を指定した例です（イシュー #3125、tabs の Enclosed と同一外観）。
Pill + palette
Pill variant と color-palette 軸（Accent）を組み合わせた例です（イシュー #3125）。
Bar variant
root_with で TabNavVariant::Bar を指定した例です（イシュー #3126、枠線・角丸・影のカード状コンテナ + 区切り線 + 下端インジケータ）。
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Tab / Shift+Tab | 通常のリンクとしてフォーカス移動する。矢印キーによる roving tabindex は持たない（crate::tabs との決定的な差）。 |
WAI-ARIA
| Attribute | Description |
|---|---|
| aria-label（root、必須引数） | landmark のアクセシブルネームを常に持つ（tab_nav.rs:171）。 |
| aria-current="page"（link、current=true のとき） | 現在ページを示す（tab_nav.rs:198-209）。 |
| role | 一切出力しない（tab_nav.rs:18）。 |