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

ตัวแปร: tabs ​

const tabs: ElementDefinition

อัลฟา

<instui-tabs> — ชุดพาเนลแบบแท็บใน light-DOM ซึ่งรักษาสัญญา CSS ที่มีอยู่ .instui-tabs ไว้ขณะที่เพิ่มการเลือก การมองเห็นพาเนล และพฤติกรรมแป้นพิมพ์ผ่านการโต้ตอบแท็บร่วมกัน interaction. โหลด @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>