Tanlaş · molecule
Toggle guruhi
Yonma-yon ikonka yoki matn tugmalari: bittasi (single) yoki bir neçtasi (multi) bosiq — aria-pressed. Matn tekislaş, köriniş kabi tez tanlovlar. JS'siz variant: içida native radio/checkbox (segmentli radio guruhi).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmdlg | md |
Anatomiya
- root
.fx-togglegroupşart - item
.fx-togglegroup__itemşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → ↑ ↓ | Keyingi/oldingi tugma |
| Space, Enter | Bosiq holatni almaştiradi |
Tugmalar aria-pressed (single/multi); guruh role="group" + aria-label. Native variantda radio/checkbox brauzerning özida.
Naqş: WAI-ARIA APG button · rol group
Kod
AI uçun: qaçon işlatiladi
- Köriniş yoki format variantlari: tekislaş, ölçam, matn uslubi.
- Bitta (single) yoki bir neçta (multi) qöşimça variantning tez tanlovi.
npx foxui add togglegroup
<div class="fx-togglegroup" role="group" aria-label="Matn tekislaş" data-fx-togglegroup data-required> <button type="button" class="fx-togglegroup__item" aria-pressed="true" aria-label="Çapga"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M2 4h12M2 8h8M2 12h10"/></svg></button> <button type="button" class="fx-togglegroup__item" aria-pressed="false" aria-label="Markazga"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M2 4h12M4 8h8M3 12h10"/></svg></button> <button type="button" class="fx-togglegroup__item" aria-pressed="false" aria-label="Öngga"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M2 4h12M6 8h8M4 12h10"/></svg></button> </div> <div class="fx-togglegroup" role="group" aria-label="Matn uslubi" data-fx-togglegroup data-mode="multi" data-size="sm"> <button type="button" class="fx-togglegroup__item" aria-pressed="true">Qalin</button> <button type="button" class="fx-togglegroup__item" aria-pressed="false">Qiya</button> <button type="button" class="fx-togglegroup__item" aria-pressed="false">Tagiga çiziq</button> </div> <div class="fx-togglegroup" role="radiogroup" aria-label="Tölov davri"> <label class="fx-togglegroup__item"><input type="radio" name="davr" value="oy" checked>Oylik</label> <label class="fx-togglegroup__item"><input type="radio" name="davr" value="yil">Yillik</label> </div>
Tokenlar: --fx-bg-page --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-lg --fx-control-h-md --fx-control-h-sm --fx-ease-standard --fx-font-size-sm --fx-font-weight-medium --fx-knob-pill --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-control --fx-size-icon-md --fx-space-2 --fx-space-3 --fx-text-disabled --fx-text-primary --fx-text-secondary