Tabs

slot=tab / slot=panel · selected-index · select() · tw-change

Preview

基本

プロジェクトの概要です。タブをクリックするとパネルが切り替わります。

詳細パネル。矢印キーでもタブを移動できます。

履歴パネル。初期選択は先頭（selected-index=0）です。

selected-index / select()

console.log("js");

console.log("ts");

select(0)

select(1)

tw-change

選択が変わったときだけ tw-change が発火します（同じタブの再選択では発火しません）。

詳細パネル。

設定パネル。

selectedIndex: 0

HTML

<tw-tabs>
  <button type="button" slot="tab">概要</button>
  <button type="button" slot="tab">詳細</button>
  <div slot="panel">
    <p>プロジェクトの概要です。</p>
  </div>
  <div slot="panel">
    <p>詳細パネル。</p>
  </div>
</tw-tabs>

<tw-tabs id="…" selected-index="1">
  <button type="button" slot="tab">JS</button>
  <button type="button" slot="tab">TS</button>
  <div slot="panel"><pre><code>console.log("js");</code></pre></div>
  <div slot="panel"><pre><code>console.log("ts");</code></pre></div>
</tw-tabs>

<button type="button" id="…">select(0)</button>
<button type="button" id="…">select(1)</button>

<tw-tabs id="tabs-change">
  <button type="button" slot="tab">概要</button>
  <button type="button" slot="tab">詳細</button>
  <div slot="panel"><p>…</p></div>
  <div slot="panel"><p>…</p></div>
</tw-tabs>

import "@b4moss/the-wheels";

const tabs = document.getElementById("tabs-controlled");
document.getElementById("select-js")?.addEventListener("click", () => {
  tabs?.select(0);
});
document.getElementById("select-ts")?.addEventListener("click", () => {
  tabs?.select(1);
});

const changing = document.getElementById("tabs-change");
const label = document.getElementById("tabs-change-label");
changing?.addEventListener("tw-change", (event) => {
  if (label) label.textContent = `selectedIndex: ${event.detail.selectedIndex}`;
});

import "@b4moss/the-wheels";
import type { TwTabs } from "@b4moss/the-wheels";

const tabs = document.getElementById("tabs-controlled") as TwTabs | null;
document.getElementById("select-js")?.addEventListener("click", () => {
  tabs?.select(0);
});
document.getElementById("select-ts")?.addEventListener("click", () => {
  tabs?.select(1);
});

const changing = document.getElementById("tabs-change") as TwTabs | null;
const label = document.getElementById("tabs-change-label");
changing?.addEventListener("tw-change", ((
  event: CustomEvent<{ selectedIndex: number }>
) => {
  if (label) label.textContent = `selectedIndex: ${event.detail.selectedIndex}`;
}) as EventListener);