Tabs

fandhe-frontend-pre-styled-ui の tabs mod が提供するスタイル済み Tabs 部品です。 WAI-ARIA APG の Tabs パターン（role="tablist"/"tab"/"tabpanel"・ aria-selected・相互参照する aria-controls/aria-labelledby）に準拠したマークアップを SSR 時点の静的な選択状態から組み立てます。ページ内に収まるコンテンツ切り替え UI であり、他のセクションを覆うオーバーレイではないため、掲示位置を中和する専用 CSS は不要です。

Demo

headless-ui の Tabs（WAI-ARIA Tabs パターン）に pre-styled-ui の data-scope / data-part セレクタ CSS を適用した静的掲示です。

選択中のタブは data-state="active" で強調されます。

Features

WAI-ARIA APG の Tabs パターン（role="tablist"/"tab"/"tabpanel"、aria-selected、相互参照する aria-controls/aria-labelledby、roving tabindex）に準拠したマークアップを組み立てる。
root / list / trigger / content の 4 パーツに加え、選択タブの位置を示す装飾パーツ indicator（opt-in）を持つ 5 パーツ構成。
ActivationMode（Automatic/Manual）と Orientation（Horizontal/Vertical）を data-activation-mode / data-orientation として出力する。
size / color-palette variant で root にクラスを付与する。

Anatomy

root
  list
    trigger
  content

API Reference

Arguments

Name	Type	Default	Description
size	Size	Size::Md	root へ付与するサイズ variant。
palette	ColorPalette		root へ付与する配色 variant。
props	&TabsProps<'_>		id/selected/orientation/activation_mode/loop_focus/indicator を束ねる SSR 静的設定値。

Data Attributes

Part	Attribute	Observed Values
content	data-orientation	horizontal
content	data-state	active, inactive
list	data-activation-mode	automatic
list	data-loop-focus	true
list	data-orientation	horizontal
root	data-orientation	horizontal
trigger	data-orientation	horizontal
trigger	data-state	active, inactive
trigger	data-value	overview, usage

CSS Variables

Variable	Default
--fandhe-tabs-content-padding	var(--fandhe-space-4) 0
--fandhe-tabs-trigger-padding	var(--fandhe-space-2) var(--fandhe-space-4)

Accessibility

WAI-ARIA

Attribute	Description
role="tablist" / aria-orientation	list に付与。
role="tab" / aria-selected / aria-controls	trigger に付与。選択状態と対応する content の id を表す。
role="tabpanel" / aria-labelledby	content に付与。対応する trigger の id を指す。