Skip to content

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

變數: tabs ​

const tabs: ElementDefinition

Alpha(內測)

<instui-tabs> — 一組 light-DOM 的分頁面板。它保留現有的 .instui-tabs CSS 契約 完整,同時透過共用的 tabs 互動新增選取、面板可見性與鍵盤行為。載入 @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>