Tablar

1. list.fx-tabsşart
2. tab.fx-tabs__tabşart
3. panel.fx-tabs__panelşart
4. icon.fx-tabs__iconixtiyoriy
5. item (yopiladigan tab qobiği).fx-tabs__itemixtiyoriy
6. close.fx-tabs__closeixtiyoriy
7. wrap (siljitiş qobiği).fx-tabs__wrapixtiyoriy
8. scroll.fx-tabs__scrollixtiyoriy
9. bar.fx-tabs-barixtiyoriy
10. bar-end.fx-tabs-bar__endixtiyoriy
11. error (dangasa panel xatosi).fx-tabs__errorixtiyoriy

role=tablist/tab/tabpanel, aria-controls ↔ aria-labelledby; faqat tanlangan tab Tab bilan fokus oladi (foxui.js). Dangasa panel yuklanayotganda aria-busy="true", xato — role=alert.

Naqş: WAI-ARIA APG tabs · rol tablist

npx foxui add tabs

<div class="fx-tabs" role="tablist" aria-label="Mijoz" data-fx-tabs>
  <button class="fx-tabs__tab" role="tab" id="t1" aria-controls="p1" aria-selected="true">Umumiy</button>
  <button class="fx-tabs__tab" role="tab" id="t2" aria-controls="p2" aria-selected="false">Arizalar <span class="fx-badge" data-type="count">3</span></button>
  <button class="fx-tabs__tab" role="tab" id="t3" aria-controls="p3" aria-selected="false">Tarix</button>
</div>
<div class="fx-tabs__panel" role="tabpanel" id="p1" aria-labelledby="t1" tabindex="0">Ism, telefon, holat.</div>
<div class="fx-tabs__panel" role="tabpanel" id="p2" aria-labelledby="t2" tabindex="0" hidden>3 ta ariza.</div>
<div class="fx-tabs__panel" role="tabpanel" id="p3" aria-labelledby="t3" tabindex="0" hidden>Özgarişlar tarixi.</div>

<!-- Variantlar: <div class="fx-tabs" role="tablist" data-variant="pill" data-fx-tabs> · data-variant="enclosed" · data-orientation="vertical".
     Ikonli tab: <button class="fx-tabs__tab" role="tab"><svg class="fx-tabs__icon" viewBox="0 0 20 20" aria-hidden="true">…</svg>Nom</button>
     Yopiladigan: <span class="fx-tabs__item"><button class="fx-tabs__tab" role="tab">…</button><button class="fx-tabs__close" data-fx-tab-close aria-label="Yopish">×</button></span>
     Siljitish: <div class="fx-tabs__wrap"><button class="fx-tabs__scroll" data-dir="prev" aria-label="Oldinga" hidden>…</button><div class="fx-tabs" role="tablist" data-fx-tabs>…</div><button class="fx-tabs__scroll" data-dir="next" aria-label="Keyingisi" hidden>…</button></div> -->
<div class="fx-tabs-bar"><div class="fx-tabs" role="tablist" aria-label="Köriniş" data-fx-tabs><button class="fx-tabs__tab" role="tab" id="tb-d" aria-controls="tbp-d" aria-selected="true">Doska</button><button class="fx-tabs__tab" role="tab" id="tb-j" aria-controls="tbp-j" aria-selected="false">Jadval</button></div><div class="fx-tabs-bar__end"><button class="fx-btn" data-variant="primary" data-size="sm" type="button">+ Yangi buyurtma</button></div></div><div class="fx-tabs__panel" role="tabpanel" id="tbp-d" aria-labelledby="tb-d" tabindex="0">Doska</div><div class="fx-tabs__panel" role="tabpanel" id="tbp-j" aria-labelledby="tb-j" tabindex="0" hidden>Jadval</div>

<!-- Dangasa panel: faqat faol tab kontenti sahifa bilan keladi; qolgani bosilganda (yoki siçqonça ustiga kelganda) yuklanadi.
     HTML parcha — panelga qöyiladi; JSON — panelda «fx-tab-data» hodisasi (event.detail.data), loyiha özi çizadi. -->
<div class="fx-tabs" role="tablist" aria-label="Mijoz kartasi" data-fx-tabs data-url="tab">
  <button class="fx-tabs__tab" role="tab" id="mk-t1" data-tab="umumiy" aria-controls="mk-p1" aria-selected="true">Umumiy</button>
  <button class="fx-tabs__tab" role="tab" id="mk-t2" data-tab="arizalar" aria-controls="mk-p2" aria-selected="false">Arizalar</button>
</div>
<div class="fx-tabs__panel" role="tabpanel" id="mk-p1" aria-labelledby="mk-t1" tabindex="0">Ism, telefon, holat.</div>
<div class="fx-tabs__panel" role="tabpanel" id="mk-p2" aria-labelledby="mk-t2" tabindex="0" hidden data-src="/crm/mijoz/42/arizalar.html">
  <div class="fx-skeleton-group" data-anim="shimmer" aria-hidden="true"><span class="fx-skeleton"></span><span class="fx-skeleton"></span><span class="fx-skeleton"></span></div>
</div>

Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-pressed --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-duration-base --fx-ease-spring --fx-ease-standard --fx-font-size-sm --fx-font-weight-medium --fx-motion-fast --fx-motion-slow --fx-radius-badge --fx-radius-nav --fx-size-icon-lg --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-text-primary --fx-text-secondary --fx-text-tertiary