Skip to content

pantoken-root / renderers/web-components/src / tabs

変数: tabs ​

const tabs: ElementDefinition

アルファ

<instui-tabs> — ライト DOM のタブ付きパネルセット。既存の .instui-tabs CSS 契約を維持しつつ 共有タブのインタラクションを通じて選択、パネルの可視性、キーボード操作を追加します。 ビジュアルには @pantoken/components/components.css を読み込んでください。

例 ​

html
<instui-tabs>
  <div class="list" role="tablist" aria-label="Settings">
    <button role="tab" aria-selected="true" aria-controls="general">一般</button>
    <button role="tab" aria-selected="false" aria-controls="advanced">詳細設定</button>
  </div>
  <div id="general" role="tabpanel">生成方法</div>
  <div id="advanced" role="tabpanel" hidden>詳細設定</div>
</instui-tabs>