CSS: tabs ​

.instui-tabs — Een tabbladpanelenreeks: een tabbladlijst, selecteerbare tabbladen en hun panelen.

Zie de leden tabs.tab en tabs.panel voor de afzonderlijke tabbladknoppen en hun inhoudspanelen.

Source: panel.css

TIP

JS-verbetering — De CSS van deze component rendert en werkt op zichzelf; combineer met @pantoken/interactions om het interactieve gedrag toe te voegen. Zie de modifier table below.

Toegankelijkheid ​

Koppel de tabbladlijst met role="tablist", elk tabblad met role="tab" en aria-selected, en elk paneel met role="tabpanel".

Gebruik ​

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

Voorbeelden ​

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">Overzicht</button>
    <button class="tab" role="tab" aria-selected="false">Activiteit</button>
  </div>
  <div class="panel" role="tabpanel">Projectoverzicht</div>
</div>

Structuur ​

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;

Modifiers ​

ModifierBeschrijving
.-overflow-scrollHoud de tabbladlijst op één regel en laat deze horizontaal scrollen in plaats van doorlopen, waarbij de schuifbalk verborgen blijft.
.-variant-secondaryRonde "map"-tabbladen met een geselecteerd tabblad dat visueel verbonden is met het paneel eronder. @affects tabs.tab — Zet de stijl van de tabbladknoppen om naar het afgeronde "map"-uiterlijk.

Onderdelen ​

OnderdeelBeschrijving
.listDe rij met tabbladen.

Gebruikte tokens ​

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

Subcomponenten ​