CSS: tabs.tab
.tab — Egyetlen fül gomb (InstUI Tabs.Tab, amely a szülő Tabs füllistáján keresztül konfigurálható); a(z) -selected jelöli az aktívat.
A szülő tabs -variant-secondary módosítója lekerekített "mappa" füllé formázza ezt a tagot — lásd a(z) tabs saját dokumentációját erről a módosítóról.
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/tabs.tab.css";Módosítók
| Módosító | Leírás |
|---|---|
.-disabled | Nem interaktív; ugyanaz a stílus, mint a(z) [aria-disabled="true"]/:disabled esetén. |
.-selected | Az aktív fül; ugyanaz a stílus, mint a(z) [aria-selected="true"] esetén. |
Állapotok
| Állapot | Leírás |
|---|---|
[aria-disabled="true"] | — |
[aria-selected="true"] | — |
:disabled | — |
:state(selected) | — |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--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) |