CSS: tabs ​

.instui-tabs — ชุดพาเนลแบบแท็บ: รายการแท็บ, แท็บที่เลือกได้, และพาเนลของแต่ละแท็บ.

ดูสมาชิก tabs.tab และ tabs.panel สำหรับปุ่มแท็บแต่ละปุ่มและพาเนลเนื้อหาของพวกมัน.

Source: panel.css

TIP

การปรับปรุง JS — CSS ของคอมโพเนนต์นี้เรนเดอร์และทำงานได้ด้วยตัวเอง; จับคู่กับ @pantoken/interactions เพื่อเพิ่มพฤติกรรมเชิงโต้ตอบ ดู ตารางตัวปรับแต่งด้านล่าง.

การเข้าถึง ​

เชื่อมรายการแท็บด้วย role="tablist" กำหนดแต่ละแท็บด้วย role="tab" และ aria-selected และกำหนดแต่ละพาเนลด้วย role="tabpanel".

การใช้งาน ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/tabs.css";

ตัวอย่าง ​

html
<div class="instui-tabs -variant-secondary">
  <div class="list" role="tablist" aria-label="Project views">
    <button class="tab -selected" role="tab" aria-selected="true">ภาพรวม</button>
    <button class="tab" role="tab" aria-selected="false">กิจกรรม</button>
  </div>
  <div class="panel" role="tabpanel">ภาพรวมโครงการ</div>
</div>

โครงสร้าง ​

text
.instui-tabs
  list (component)
    tabs.tab (component, 0..n)
  tabs.panel (component, 0..n)
flowchart TD n0[".instui-tabs"]:::cssdoc-root n1(["list"]):::cssdoc-component n2(["tabs.tab"]):::cssdoc-component n3(["tabs.panel"]):::cssdoc-component n1 -->|0..n| n2 n0 --> n1 n0 -->|0..n| n3 click n1 "/api/css/list.md" click n2 "/api/css/tabs.tab.md" click n3 "/api/css/tabs.panel.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

ตัวปรับแต่ง ​

ตัวปรับแต่งคำอธิบาย
.-overflow-scrollให้รายการแท็บอยู่ในบรรทัดเดียวและเลื่อนแนวนอนแทนการขึ้นบรรทัดใหม่ โดยซ่อนแถบเลื่อน.
.-variant-secondaryแท็บแบบ "โฟลเดอร์" ขอบโค้ง โดยมีแท็บที่เลือกซึ่งเชื่อมต่อทางสายตากับพาเนลด้านล่าง. @affects tabs.tab — ปรับสไตล์ปุ่มแท็บให้เป็นรูปแบบ "โฟลเดอร์" ขอบโค้ง.

ส่วนประกอบ ​

ส่วนคำอธิบาย
.listแถวของแท็บ.

โทเค็นที่ใช้ ​

Tokenชนิดค่า
--instui-component-tabs-default-background<color>#00000000

ส่วนประกอบย่อย ​