CSS: tabs ​

.instui-tabs — Un ensemble d'onglets : une liste d'onglets, des onglets sélectionnables et leurs panneaux.

Consultez les membres tabs.tab et tabs.panel pour les boutons d'onglet individuels et leurs panneaux de contenu.

Source: panel.css

TIP

Amélioration JS — Le CSS de ce composant rend et fonctionne de façon autonome ; associez-le à @pantoken/interactions pour ajouter le comportement interactif. Voir le tableau des modificateurs ci‑dessous.

Accessibilité ​

Lier la liste d'onglets avec role="tablist", chaque onglet avec role="tab" et aria-selected, et chaque panneau avec role="tabpanel".

Utilisation ​

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">Aperçu</button>
    <button class="tab" role="tab" aria-selected="false">Activité</button>
  </div>
  <div class="panel" role="tabpanel">Aperçu du projet</div>
</div>

Structure ​

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;

Modificateurs ​

ModificateurDescription
.-overflow-scrollGarder la liste d'onglets sur une seule ligne et la faire défiler horizontalement plutôt que de la faire revenir à la ligne, en masquant la barre de défilement.
.-variant-secondaryOnglets arrondis "folder" avec un onglet sélectionné qui se connecte visuellement au panneau ci‑dessous. @affects tabs.tab — Redessine les boutons d'onglet pour obtenir l'apparence arrondie "folder".

Parties ​

PartieDescription
.listLa rangée d'onglets.

Tokens consommés ​

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

Sous-composants ​