タブ — Stimeo UI

← すべてのコンポーネント

stimeo--tabs コントローラは WAI-ARIA の Tabs パターンを automatic activation で実装します。矢印キーでフォーカスを動かすと、その時点でフォーカスされたタブが即座に選択されます。aria-selected、 roving tabindex（選択タブが 0、その他が -1）、パネルの表示/非表示を管理します。タブとパネルは並び順（インデックス）で対応づきます。ライブラリは挙動のみを提供し、見た目はこの Playground 側が持ちます。

実行中

概要コンテンツを表示しています。

キーボード操作

キー	動作
`→ / ←`	次 / 前のタブを選択する（端で循環）。
`Home / End`	最初 / 最後のタブを選択する。

<%# Markup for the tabs (APG Tabs / automatic activation) demo.
    stimeo--tabs provides aria-selected, roving tabindex, arrow-key switching, and panel
    visibility control. The initially selected tab has aria-selected="true" and
    non-selected panels carry hidden (to prevent SSR flicker). %>
<div class="tabs" data-controller="stimeo--tabs">
  <div class="tabs__list" role="tablist" aria-label="<%= t("components.tabs.demo.label") %>">
    <button class="tabs__tab" role="tab" id="tab-overview" aria-controls="panel-overview"
            aria-selected="true"
            data-stimeo--tabs-target="tab"
            data-action="click->stimeo--tabs#select
                         keydown->stimeo--tabs#onKeydown"><%= t(
              "components.tabs.demo.overview"
            ) %></button>
    <button class="tabs__tab" role="tab" id="tab-profile" aria-controls="panel-profile"
            aria-selected="false" tabindex="-1"
            data-stimeo--tabs-target="tab"
            data-action="click->stimeo--tabs#select
                         keydown->stimeo--tabs#onKeydown"><%= t(
              "components.tabs.demo.profile"
            ) %></button>
    <button class="tabs__tab" role="tab" id="tab-billing" aria-controls="panel-billing"
            aria-selected="false" tabindex="-1"
            data-stimeo--tabs-target="tab"
            data-action="click->stimeo--tabs#select
                         keydown->stimeo--tabs#onKeydown"><%= t(
              "components.tabs.demo.billing"
            ) %></button>
  </div>

  <div class="tabs__panel" role="tabpanel" id="panel-overview" aria-labelledby="tab-overview"
       data-stimeo--tabs-target="panel"><%= t("components.tabs.demo.overview_content") %></div>
  <div class="tabs__panel" role="tabpanel" id="panel-profile" aria-labelledby="tab-profile"
       data-stimeo--tabs-target="panel" hidden><%= t(
         "components.tabs.demo.profile_content"
       ) %></div>
  <div class="tabs__panel" role="tabpanel" id="panel-billing" aria-labelledby="tab-billing"
       data-stimeo--tabs-target="panel" hidden><%= t(
         "components.tabs.demo.billing_content"
       ) %></div>
</div>

/*
 * Presentation-only styles for the tabs demo.
 * The selected state is expressed via aria-selected (set by the library).
 */

.tabs__list {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
}

.tabs__tab {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
}

.tabs__tab[aria-selected="true"] {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

.tabs__panel {
  padding: 1rem 0.25rem;
}

これらのスタイルは共通のデザイントークン（ライト/ダーク両対応）を使います。共通スタイルも一緒にコピーし、ルート要素の data-theme を切り替えればダークになります。

このコンポーネントを動かすために HTML へ記述する data-* 属性です。ルート要素に下の data-controller を付け、その内側に各 target / value / action を配置します。

ルート要素に付与 data-controller="stimeo--tabs"

ターゲット

名前	説明	属性
`tab` 必須	タブボタン（`role=tab`）。同じインデックスのパネルと対応し、`aria-selected` とロービング `tabindex` を持つ。	`data-stimeo--tabs-target="tab"`
`panel` 必須	タブパネル（`role=tabpanel`）。hidden 属性で対応タブの選択状態を反映する。	`data-stimeo--tabs-target="panel"`

アクション

名前	説明	アクション
`onKeydown`	矢印/Home/End によるナビゲーション。自動アクティベーションでフォーカス先のタブを選択する。	`stimeo--tabs#onKeydown`
`select`	クリックされたタブを選択し、`aria-selected`・`tabindex`・パネルの表示を更新する。	`stimeo--tabs#select`

状態フック

ライブラリが操作するのはこれらの ARIA / data 属性、カスタムプロパティだけです。見た目は利用側 CSS がこれらに反応して作ります（[aria-selected] / [aria-expanded] / var(--stimeo--…) などのセレクタでフックします）。

フック	対象	意味
`aria-selected`	各タブ	選択中のタブは "true"、それ以外は "false"。
`tabindex`	各タブ	選択中のタブは 0、それ以外は -1（ローヴィング tabindex）。
`hidden`	各パネル	選択中のタブのパネルだけ表示される。