Navigatsiya · molecule
Segment
Bir xil ma'lumotning 2–4 körinişi orasida tanlaş (Oylik / Yillik, Röyxat / Jadval). Tugmalar guruhi: tanlangani aria-pressed="true"; filtr havolalari bölsa aria-current="page". Panelli tablar — fx-tabs. Kengaytma: data-fill (töliq en), data-icon-only, data-multi (toggle guruhi), sm ölçamda ≥24px bosiş maydoni. Forma varianti: <label class="fx-segment__item"><input type="radio"> — JS'siz yuboriladi, tanlangani :checked.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmd | md |
data-fill | true | — |
data-icon-only | true | — |
data-multi | true | — |
Anatomiya
- root
.fx-segmentşart - item
.fx-segment__itemşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter/Space | Tanlaydi |
role=tablist / tab, aria-selected; öq tugmalari bilan almaşiş — JS qatlamida.
Kod
AI uçun: qaçon işlatiladi
npx foxui add segment
<div class="fx-segment" role="group" aria-label="Tölov davri"> <button class="fx-segment__item" aria-pressed="true">Oylik</button> <button class="fx-segment__item" aria-pressed="false">Yillik</button> </div> <div class="fx-segment" data-fill data-multi role="group" aria-label="Matn uslubi"><button type="button" class="fx-segment__item" aria-pressed="true">Qalin</button><button type="button" class="fx-segment__item" aria-pressed="true">Qiya</button><button type="button" class="fx-segment__item" aria-pressed="false">Tagiga çizilgan</button></div> <form><div class="fx-segment" role="radiogroup" aria-label="Baho"><label class="fx-segment__item"><input type="radio" name="baho" value="zor">Zör</label><label class="fx-segment__item"><input type="radio" name="baho" value="yaxshi" checked>Yaxşi</label><label class="fx-segment__item"><input type="radio" name="baho" value="yomon">Yomon</label></div></form>
Tokenlar: --fx-bg-muted --fx-bg-surface --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-control-h-sm --fx-ease-spring --fx-ease-standard --fx-font-size-sm --fx-font-weight-medium --fx-knob-pill --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-slow --fx-radius-control --fx-shadow-sm --fx-size-icon-md --fx-size-min-target --fx-space-1 --fx-space-2 --fx-space-4 --fx-text-primary --fx-text-secondary