Tanlaş · compound
Kaskad tanlov
Içma-iç tanlov (viloyat → tuman → mahalla): tugma bosilsa ustunlar ketma-ket yonma-yon oçiladi, oxirgi bandni tanlaş butun yölni (“Samarqand / Urgut”) yozadi. Menyu naqşi: ↓ ↑ band, → içkariga, ← orqaga, Esc yopadi. Hodisa `fx-cascader-change`.
Anatomiya
- root
.fx-cascaderşart - trigger
.fx-cascader__triggerşart - value
.fx-cascader__valueixtiyoriy - popup
.fx-cascader__popupşart - list
.fx-cascader__listşart - item
.fx-cascader__itemşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space, ↓ | Tugmada: oçadi |
| ↓ ↑ | Daraja içida band |
| → | Içki daraja oçiladi |
| ← | Bir daraja orqaga |
| Enter, Space | Barg bandni tanlaydi |
| Esc | Yopadi, fokus tugmaga |
| Home, End | Birinçi / oxirgi band |
Tugma aria-haspopup="menu" + aria-expanded; röyxatlar role="menu", bandlar role="menuitem" (içkarisi borida aria-haspopup). ← → daraja almaşadi, Esc yopib fokusni tugmaga qaytaradi. Tanlangan yöl aria-checked bilan belgilanadi va tugmada matn sifatida körinadi.
Naqş: WAI-ARIA APG menu-button · rol menu
Kod
AI uçun: qaçon işlatiladi
- Ierarxik tanlov: manzil, toifa → quyi toifa, mahsulot daraxti (2–3 daraja).
- Bir darajali röyxat →
select - Çuqur yoki qidiriladigan daraxt →
treeselect - 3–4 darajadan çuqur qilmang; çuqur daraxt uçun `treeselect` (qidiruv bilan).
- Tanlangan yölni faqat oxirgi nom bilan körsatmang — qaysi tumanligi noaniq qoladi.
- Hover'ga tayanmang: sensorli qurilmada bosiş oçadi (komponent şunday).
npx foxui add cascader
<div class="fx-cascader" data-fx-cascader>
<button type="button" class="fx-cascader__trigger" aria-label="Hudud tanlaş"><span class="fx-cascader__value" data-empty>Hududni tanlang</span></button>
<input type="hidden" name="hudud">
<div class="fx-cascader__popup">
<ul class="fx-cascader__list">
<li role="none"><button class="fx-cascader__item" data-value="tk">Toşkent</button>
<ul class="fx-cascader__list"><li role="none"><button class="fx-cascader__item" data-value="tk-ch">Çilonzor</button></li><li role="none"><button class="fx-cascader__item" data-value="tk-yu">Yunusobod</button></li><li role="none"><button class="fx-cascader__item" data-value="tk-mi">Mirzo Ulugʻbek</button></li></ul></li>
<li role="none"><button class="fx-cascader__item" data-value="sm">Samarqand</button>
<ul class="fx-cascader__list"><li role="none"><button class="fx-cascader__item" data-value="sm-sh">Samarqand şahri</button></li><li role="none"><button class="fx-cascader__item" data-value="sm-ur">Urgut</button>
<ul class="fx-cascader__list"><li role="none"><button class="fx-cascader__item" data-value="sm-ur-1">Dahbed</button></li><li role="none"><button class="fx-cascader__item" data-value="sm-ur-2">Qoraboğ</button></li></ul></li></ul></li>
<li role="none"><button class="fx-cascader__item" data-value="bx">Buxoro</button></li>
</ul>
</div>
</div>Tokenlar: --fx-bg-field --fx-bg-muted --fx-bg-pressed --fx-bg-surface --fx-border-color-error --fx-border-color-field --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-control-h-sm --fx-font-size-md --fx-font-size-sm --fx-font-weight-medium --fx-knob-field-fill --fx-popover-width --fx-radius-control --fx-radius-nav --fx-radius-overlay --fx-shadow-lg --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-brand --fx-text-primary --fx-text-tertiary