CSS: tabs ​

.instui-tabs — Un conjunt de panells amb pestanyes: una llista de pestanyes, pestanyes seleccionables i els seus panells.

Consulteu els membres tabs.tab i tabs.panel per als botons de pestanya individuals i els seus panells de contingut.

Source: panel.css

TIP

Millora JS — El CSS d'aquest component es renderitza i funciona per si sol; combineu-lo amb @pantoken/interactions per afegir el comportament interactiu. Vegeu la taula de modificadors més avall.

Accessibilitat ​

Enllaçar la llista de pestanyes amb role="tablist", cada pestanya amb role="tab" i aria-selected, i cada panell amb role="tabpanel".

Ús ​

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

Exemples ​

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">Visió general</button>
    <button class="tab" role="tab" aria-selected="false">Activitat</button>
  </div>
  <div class="panel" role="tabpanel">Visió general del projecte</div>
</div>

Estructura ​

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;

Modificadors ​

ModificadorDescripció
.-overflow-scrollMantingueu la llista de pestanyes en una sola línia i deixeu-la desplaçar-se horitzontalment en lloc d'ajustar-se, ocultant la barra de desplaçament.
.-variant-secondaryPestanyes arrodonides en forma de "carpeta" amb una pestanya seleccionada que es connecta visualment amb el panell inferior. @affects tabs.tab — Reestilitza els botons de pestanya amb l'aspecte arrodonit de "carpeta".

Parts ​

PartDescripció
.listLa fila de pestanyes.

Tokens consumits ​

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

Subcomponents ​