Skip to content
fandhe-frontend
GitHub

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 を使ってください。

関連 API: fandhe-frontend-pre-styled-ui API

Demo

pre-styled-ui 単独定義の anatomy（data-scope="tab-nav"）による静的掲示です。role="tablist"/role="tab" を出力せず、素の nav/a の暗黙 ARIA ロールのみを使います。Overview を現在ページ（aria-current="page"）として掲示しています。

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）
  • 見た目は crate::tabs と共有の宣言列（shared_tab_list_declarations 等）から生成し、size/color-palette variant は非提供（tab_nav.rs:31-36, 63-66）

Anatomy

root
  link

API Reference

Arguments

NameTypeDefaultDescription
label&strroot に付与する aria-label（必須引数、tab_nav.rs:171）。
href&strlink の href（tab_nav.rs:198）。
currentboolfalsetrue のとき aria-current="page" + data-current を付与する（tab_nav.rs:198-209）。

Data Attributes

PartAttributeObserved Values
linkdata-current

CSS Variables

VariableDefault
--fandhe-tab-nav-link-paddingvar(--fandhe-space-2) var(--fandhe-space-4)

Examples

Tabs / Nav List / Menubar の 3 リンクのうち Tabs を現在ページとした例です。

Accessibility

Keyboard Interactions

KeyDescription
Tab / Shift+Tab通常のリンクとしてフォーカス移動する。矢印キーによる roving tabindex は持たない（crate::tabs との決定的な差）。

WAI-ARIA

AttributeDescription
aria-label（root、必須引数）landmark のアクセシブルネームを常に持つ（tab_nav.rs:171）。
aria-current="page"（link、current=true のとき）現在ページを示す（tab_nav.rs:198-209）。
role一切出力しない（tab_nav.rs:18）。