CSS: tabs

.instui-tabs — Egy lapozott panelek készlete: egy fülista, választható fülek és azok panelje.

Az egyes fül gombokhoz és azok tartalompaneljeihez lásd a(z) tabs.tab és tabs.panel tagokat.

Forrás: panel.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

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

Példák

<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>

Felépítés

.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;

Módosítók

Módosító	Leírás
.-overflow-scroll	A fülek listájának egyetlen sorban tartása és vízszintes görgetésének engedélyezése tördelés helyett, a görgetősáv elrejtésével.
.-variant-secondary	Lekerekített "mappa" fülek egy olyan kiválasztott füllel, amely vizuálisan kapcsolódik az alatta lévő panelhez. @affects tabs.tab — Újraformázza a fül gombjait a lekerekített "mappa" kinézetre.

Részek

Rész	Leírás
.list	A fülek sora.

Felhasznált tokenek

Token	Típus	Érték
--instui-component-tabs-default-background	<color>	#00000000

Alkomponensek

• list
• tabs.panel
• tabs.tab