Tabs

マークアップstyles.css

コピー

<pe-tabs class="Tabs">
<div class="List" data-tabs-list aria-label="Account settings">
  <button type="button" class="Tab" data-tabs-trigger="profile">Profile</button>
  <button type="button" class="Tab" data-tabs-trigger="security">Security</button>
  <span class="Indicator" data-tabs-indicator></span>
</div>

<section class="Panel" data-tabs-content="profile">Profile settings</section>
<section class="Panel" data-tabs-content="security">Security settings</section>
</pe-tabs>

.Tabs {
  display: block;
  max-width: 24rem;
  width: 100%;
  color: oklch(14.5% 0 0);

  @media (prefers-color-scheme: dark) {
    color: white;
  }
}

.Tabs .List {
  position: relative;
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid oklch(14.5% 0 0);

  @media (prefers-color-scheme: dark) {
    border-bottom-color: white;
  }
}

.Tabs .Tab {
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;

  &[data-state="active"] {
    border-color: oklch(14.5% 0 0);
    border-bottom-color: oklch(97% 0 0);
    background: oklch(97% 0 0);

    @media (prefers-color-scheme: dark) {
      border-color: white;
      border-bottom-color: oklch(14.5% 0 0);
      background: oklch(14.5% 0 0);
    }
  }
}

.Tabs .Indicator {
  position: absolute;
  bottom: -1px;
  left: var(--active-tab-left);
  width: var(--active-tab-width);
  height: 2px;
  background: oklch(14.5% 0 0);
  pointer-events: none;

  @media (prefers-color-scheme: dark) {
    background: white;
  }
}

.Tabs .Panel {
  padding: 0.75rem 0.25rem;
  line-height: 1.5;
}

.Tabs.Vertical {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1rem;
}

.Tabs .ListVertical {
  flex-direction: column;
  align-self: start;
  border-right: 1px solid oklch(14.5% 0 0);
  border-bottom: 0;

  @media (prefers-color-scheme: dark) {
    border-right-color: white;
  }
}

.Tabs .ListVertical .Tab {
  width: 100%;
  margin: 0;
  text-align: left;
}

@media (max-width: 480px) {
  .Tabs.Vertical {
    grid-template-columns: 1fr;
  }
}

Tabs は、複数のコンテンツを切り替えて表示するときに使います。リストにアクセシブル名を付け、各トリガーとパネルに同じ空でない値を指定します。パネルの表示に時間がかかる場合は手動選択を使います。

キーボード操作

キー	動作
Left / Right	横並びのタブ間を移動します。初期設定では、端から反対側へ移動します
Up / Down	縦並びのタブ間を移動します。初期設定では、端から反対側へ移動します
Home / End	最初 / 最後の有効なタブへ移動
Enter / Space	手動選択モードで、フォーカス中のタブを選択します

無効なトリガーはスキップされます。ボタンにはネイティブの disabled を優先してください。

構造

パーツ	セレクター	役割
ホスト	<pe-tabs>	ライフサイクルと選択値を管理します
リスト	[data-tabs-list]	role="tablist" とタブの向きが設定されます
トリガー	[data-tabs-trigger="value"]	タブ用の ARIA 属性、tabindex、選択状態が設定されます
パネル	[data-tabs-content="value"]	タブパネル用の ARIA 属性と表示状態が設定されます
インジケーター	[data-tabs-indicator]	選択中のタブを示す任意の装飾要素。位置は CSS 変数で受け取ります

API リファレンス

ホスト属性

名前	説明
data-tabs-value	初期値および現在の選択値。更新すると一致する有効なタブが選択されます。
data-tabs-orientation	"horizontal"（初期値）または "vertical"。ARIA 属性と、移動に使う矢印キーを切り替えます。
data-tabs-activation	"automatic"（初期値）または "manual"。フォーカス移動時に自動選択するか、Enter / Space で選択するかを指定します。
data-tabs-loop	"true"（初期値）または "false"。端から反対側へフォーカスを移動するかを指定します。

ホスト API

名前	型	説明
value	string | null	現在の値を取得します。文字列を代入すると選択されます。
select(value, options?)	void	有効なタブを選択します。{ focus: true } を渡すとそのトリガーにフォーカスします。

イベント

名前	説明
pe-tabs:change	選択中のタブが変わったときに発火します。イベントはバブリングし、Shadow DOM の境界も越えます。

イベントの detail には次の値が含まれます。

名前	説明
value	新しい選択値。選択できるタブがない場合は null。
previousValue	以前の選択値。
trigger	アクティブ化したタブトリガー（該当する場合）。
panel	対応するタブパネル（該当する場合）。
reason	"click"、"keyboard"、"programmatic"、"attribute"、"disabled"、または "missing"。
activationDirection	"left"、"right"、"up"、"down"、または "none"。

状態属性

名前	説明
data-state	トリガーとパネル上: "active" または "inactive"。ホスト上: 現在の値を反映します。
data-activation-direction	ホストとアクティブなトリガー上: "left"、"right"、"up"、"down"、または "none"。
data-tabs-indicator	タブリスト内に置く任意の装飾要素です。位置を表す CSS 変数が設定されます。

インジケーター CSS 変数

[data-tabs-indicator] がある場合、コンポーネントは次の CSS 変数を設定します。

名前	説明
--active-tab-left	リスト左端からの距離。
--active-tab-right	リスト右端からの距離。
--active-tab-top	リスト上端からの距離。
--active-tab-bottom	リスト下端からの距離。
--active-tab-width	アクティブなトリガーの幅。
--active-tab-height	アクティブなトリガーの高さ。