CSS: tabs
.instui-tabs — Egy lapozott panelek készlete: egy fülista, választható fülek és azok panelje.
A kiválasztott és letiltott stílus megegyezik a -selected/-disabled osztályhoz vagy a aria-selected/aria-disabled attribútumhoz, így az állapotot a jelölésbôl vagy az ARIA-ból vezérelheti.
Forrás: tabs.css
Akadálymentesség
Csatlakoztasd a fülista role="tablist" segítségével, az egyes füleket role="tab" és aria-selected segítségével, valamint az egyes paneleket role="tabpanel" segítségével.
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/tabs.css";Példák
html
<div class="instui-tabs">
<div class="list" role="tablist" aria-label="Default tabs">
<button class="tab -selected" role="tab" aria-selected="true">Overview</button>
<button class="tab" role="tab" aria-selected="false">Details</button>
<button class="tab -disabled" role="tab" aria-disabled="true" disabled>Disabled</button>
<button class="tab" role="tab" aria-selected="false">History</button>
</div>
<div class="panel" role="tabpanel">The Overview tab's content shows here.</div>
</div>The Overview tab's content shows here.
Felépítés
text
.instui-tabs
.list
.tab
.panelflowchart TD
n0[".instui-tabs"]:::cssdoc-root
n1(".list"):::cssdoc-part
n2(".tab"):::cssdoc-part
n3(".panel"):::cssdoc-part
n1 --> n2
n0 --> n1
n0 --> n3
classDef cssdoc-root stroke-width:1px;
classDef cssdoc-part stroke-width:1px;
classDef cssdoc-slot stroke-width:1px;
classDef cssdoc-component stroke-width:1px;
Részek
| Rész | Leírás |
|---|---|
.list | A fülek sora. |
.panel | A fül tartalmi panelja. |
.tab | Egyetlen fül; -selected jelöli az aktívat. |
Állapotok
| Állapot | Leírás |
|---|---|
:disabled | — |
:state(hidden) | — |
:state(selected) | — |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-tabs-default-background | <color> | #00000000 |
--instui-component-tabs-panel-background | <color> | #00000000 |
--instui-component-tabs-panel-border-color | <color> | light-dark(#8D959F, #6A7883)LightDark |
--instui-component-tabs-panel-border-width | <length> | 0.0625rem |
--instui-component-tabs-panel-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-tabs-panel-font-size | <length> | 1rem |
--instui-component-tabs-panel-font-weight | <integer> | 400 |
--instui-component-tabs-panel-line-height | <percentage> | 150% |
--instui-component-tabs-panel-text-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-tabs-tab-default-hover-border-color | <color> | light-dark(#8D959F, #6A7883)LightDark |
--instui-component-tabs-tab-default-selected-border-color | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-component-tabs-tab-default-text-color | <color> | light-dark(#273540, #ffffff)LightDark |
--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> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-component-tabs-tab-secondary-selected-border-color | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-component-tabs-tab-secondary-selected-text-color | <color> | light-dark(#ffffff, #1C222B)LightDark |
--instui-component-tabs-tab-secondary-text-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-spacing-space-md | <length> | 0.75rem |
--instui-spacing-space-sm | <length> | 0.5rem |