CSS: tabs.tab ​

.tab — ปุ่มแท็บเดี่ยว (InstUI Tabs.Tab กำหนดค่าโดยรายการแท็บของผู้ปกครอง Tabs); -selected ระบุแท็บที่กำลังใช้งาน.

ตัวแก้ไข -variant-secondary ของผู้ปกครอง tabs จะปรับสไตล์สมาชิกนี้ให้เป็นแท็บ "แฟ้ม" แบบมุมมน — ดูเอกสารของ tabs สำหรับตัวแก้ไขนั้น.

การใช้งาน ​

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

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

ตัวปรับแต่งคำอธิบาย
.-disabledไม่สามารถโต้ตอบได้; ใช้สไตล์เดียวกับ [aria-disabled="true"]/:disabled.
.-selectedแท็บที่กำลังใช้งาน; ใช้สไตล์เดียวกับ [aria-selected="true"].

สถานะ ​

สถานะคำอธิบาย
[aria-disabled="true"]—
[aria-selected="true"]—
:disabled—
:state(selected)—

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

Tokenชนิดค่า
--instui-component-tabs-panel-border-width<length>0.0625rem
--instui-component-tabs-tab-default-hover-border-color<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-component-tabs-tab-default-selected-border-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-tabs-tab-default-text-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-tabs-tab-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-tabs-tab-font-size<length>1rem
--instui-component-tabs-tab-font-weight<integer>400
--instui-component-tabs-tab-line-height<percentage>125%
--instui-component-tabs-tab-secondary-selected-background<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-tabs-tab-secondary-selected-border-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-tabs-tab-secondary-selected-text-color<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-tabs-tab-secondary-text-color<color>LightDarklight-dark(#273540, #ffffff)