CSS: tabs ​

.instui-tabs — Ein Registerkarten-Panel-Set: eine Registerkartenliste, auswählbare Registerkarten und deren Bereiche.

Siehe die tabs.tab und tabs.panel Mitglieder für die einzelnen Registerkarten-Schaltflächen und deren Inhaltsbereiche.

Source: panel.css

TIP

JS-Erweiterung — Das CSS dieses Components rendert und funktioniert eigenständig; mit @pantoken/interactions koppeln, um das interaktive Verhalten hinzuzufügen. Siehe die Modifier-Tabelle unten.

Barrierefreiheit ​

Verbinde die Registerkartenliste mit role="tablist", jede Registerkarte mit role="tab" und aria-selected, und jedes Panel mit role="tabpanel".

Verwendung ​

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

Beispiele ​

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">Übersicht</button>
    <button class="tab" role="tab" aria-selected="false">Aktivität</button>
  </div>
  <div class="panel" role="tabpanel">Projektübersicht</div>
</div>

Struktur ​

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;

Modifikatoren ​

ModifikatorBeschreibung
.-overflow-scrollHalte die Registerkartenliste in einer Zeile und lasse sie horizontal scrollen statt umbrechen, wobei die Bildlaufleiste ausgeblendet wird.
.-variant-secondaryAbgerundete "Ordner"-Registerkarten mit einer ausgewählten Registerkarte, die visuell mit dem darunterliegenden Panel verbunden ist. @affects tabs.tab — Stellt die Schaltflächen der Registerkarten in das abgerundete "Ordner"-Aussehen um.

Teile ​

TeilBeschreibung
.listDie Zeile der Registerkarten.

Verbrauchte Tokens ​

TokenTypWert
--instui-component-tabs-default-background<color>#00000000

Unterkomponenten ​