CSS: tabs ​

.instui-tabs — Un insieme di pannelli a schede: una lista di schede, schede selezionabili e i loro pannelli.

Consulta i membri tabs.tab e tabs.panel per i singoli pulsanti delle schede e i relativi pannelli di contenuto.

Source: panel.css

TIP

Miglioria JS — Il CSS di questo componente rende e funziona da solo; abbinalo a @pantoken/interactions per aggiungere il comportamento interattivo. Vedi la tabella dei modificatori sotto.

Accessibilità ​

Collega la lista di schede con role="tablist", ogni scheda con role="tab" e aria-selected, e ogni pannello con role="tabpanel".

Uso ​

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

Esempi ​

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">Panoramica</button>
    <button class="tab" role="tab" aria-selected="false">Attività</button>
  </div>
  <div class="panel" role="tabpanel">Panoramica del progetto</div>
</div>

Struttura ​

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;

Modificatori ​

ModificatoreDescrizione
.-overflow-scrollMantieni la lista di schede su un'unica riga e consentine lo scorrimento orizzontale invece di andare a capo, nascondendo la barra di scorrimento.
.-variant-secondarySchede arrotondate a "cartella" con una scheda selezionata che si collega visivamente al pannello sottostante. @affects tabs.tab — Ridisegna i pulsanti delle schede nello stile arrotondato a "cartella".

Parti ​

ParteDescrizione
.listLa riga di schede.

Token consumati ​

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

Sottocomponenti ​