Tabs
Markup canonic · components/tabs.json
sursa = JSON · generat de scripts/build-catalog.py
Tabs (segmented)
.tabs > button.active
Limita grupului · max 7 tab-uri
7 tab-uri = maximul admis într-un grup · peste 7 → dropdown sau overflow
Toate perioadele.
Ianuarie.
Februarie.
Martie.
Trimestrul 1.
Trimestrul 2.
Tot anul.
Cu badge numeric · .badge.sm
.badge.sm.neutral (inactiv) · .badge.sm.pink (activ)
Toate documentele — 84 intrări.
Documente venituri — 42 intrări.
Documente cheltuieli — 17 intrări.
Cu iconiță · .tab-icon
iconiță 14×14 la stânga labelului · moștenește culoarea tab-ului
Lista tuturor facturilor.
Facturi în așteptare.
Facturi plătite.
Iconiță + badge combinate
ordine: .tab-icon → label → .badge.sm
Toate — 84 facturi.
În așteptare — 5 facturi.
Plătite — 79 facturi.
Tabs dark
.tabs.dark · activ → accent roz
ARIA tablist — versiunea cu role-uri și keyboard
role="tablist" + role="tab" + aria-selected + role="tabpanel" · ← → navighează
Conținut pentru Lună.
Conținut pentru Trimestru.
Conținut pentru An.
Markup de referință
Structura minimă
role="tablist" pe container · role="tab" + aria-selected + aria-controls pe fiecare buton · role="tabpanel" pe panouri.
tabindex roving
Tab activ: tabindex="0". Restul: tabindex="-1". JS actualizează la schimbare — un singur tab în tabstop la un moment dat.
Max 7 tab-uri per grup
2–7 tab-uri într-un grup. Peste 7 → dropdown sau overflow. Tab-ul activ rămâne mereu vizibil, niciodată ascuns în overflow.
Cu badge
<span class="badge sm neutral">42</span> după text. Nu afișa 0 — ascunde badge-ul dacă e gol.
Cu iconiță
<span class="tab-icon"><!-- svg 14×14 --></span> înaintea textului. Icon decorativ — nu adăuga aria-label pe span.