Appearance

BoxedTabs ​

同じ場所に複数の内容を重ね、箱の形をした見出しで切り替えます。

いつ使うか ​

Tabs と同じ用途で、面が切り替わることを強く示したいときに使います。 選択中のタブが白い箱として浮き上がり、下の内容とつながって見えます。

使い分けの基準は Tabs を参照してください。

例 ​

基本 ​

ホームの内容
html
<div class="jumpu-boxed-tabs">
  <div role="tablist" aria-label="ダッシュボード">
    <button
      role="tab"
      aria-selected="true"
      aria-controls="boxed-panel-1"
      id="boxed-tab-1"
      tabindex="0"
    >
      ホーム
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="boxed-panel-2"
      id="boxed-tab-2"
      tabindex="-1"
    >
      タスク
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="boxed-panel-3"
      id="boxed-tab-3"
      tabindex="-1"
    >
      実績
    </button>
  </div>
</div>
<div
  role="tabpanel"
  id="boxed-panel-1"
  aria-labelledby="boxed-tab-1"
  class="p-4"
>
  ホームの内容
</div>
<div
  role="tabpanel"
  id="boxed-panel-2"
  aria-labelledby="boxed-tab-2"
  hidden
></div>
<div
  role="tabpanel"
  id="boxed-panel-3"
  aria-labelledby="boxed-tab-3"
  hidden
></div>

リンクとして使う ​

html
<div class="jumpu-boxed-tabs">
  <div role="tablist" aria-label="ダッシュボード（リンク）">
    <a role="tab" href="#" aria-selected="true">ホーム</a>
    <a role="tab" href="#" aria-selected="false">タスク</a>
    <a role="tab" href="#" aria-selected="false">実績</a>
  </div>
</div>

NOTE

ホバーの見た目を持ちません。 リンクやボタンとして使う場合、押せることが視覚的に伝わらないため、hover: のユーティリティで補ってください。

ユーティリティによる調整 ​

調整したいこと書き方備考
小さくtext-smタブの余白も一緒に変わります
タブの間隔[role=tablist] に gap-*既定は --spacing(2)
押下感[role=tab] に hover:bg-gray-50 など標準では変化しません

選択中のタブは、上側の余白だけが広がります。 下の面とつながって見せるための調整です。

マークアップ規約 ​

位置要素 / 属性要否効果
ルート任意の要素必須横スクロールします
ルートclass="jumpu-boxed-tabs"必須
子孫[role="tablist"]必須下に境界線が引かれます
[role="tablist"] 直下[role="tab"]必須上の角が丸くなります
[role="tab"]aria-selected必須true で白い箱になります
[role="tab"]aria-controls必須パネルの id を指します

状態 ​

状態見た目発火条件
選択中背景が白、境界が gray-300、下の境界だけ透明になる[aria-selected="true"]
選択中上側の余白が広がる[aria-selected="true"]

ホバー、アクティブ、フォーカスの見た目は持ちません。

アクセシビリティ ​

APG の Tabs パターンに準拠します。

利用側で実装することは Tabs と同じです。

選択中であることを、白い背景という色の差だけで示しています。 aria-selected を必ず併せて指定してください。