Tanlaş · compound
Daraxtli tanlov
Çuqur ierarxiyadan bitta qiymat tanlaş: combobox maydoni + oçiladigan daraxt. Yozilsa daraxt filtrlanadi (mos tugunlar ota-onalari bilan oçiladi), ← → tugunni yopadi/oçadi. Fokus doim maydonda (aria-activedescendant). `data-leaf-only` — faqat barglar tanlanadi.
- Sotuv
- Korporativ
- Çakana
- IT
- Dasturlaş
- Server va xavfsizlik
- Buxgalteriya
Anatomiya
- root
.fx-treeselectşart - popup
.fx-treeselect__popupşart - tree
.fx-treeselect__treeşart - node
.fx-treeselect__nodeşart - row
.fx-treeselect__rowşart - twisty
.fx-treeselect__twistyixtiyoriy - empty
.fx-treeselect__emptyixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ↓ ↑ | Körinadigan tugunlar orasida |
| → | Papkani oçadi / içkariga |
| ← | Papkani yopadi / otaga |
| Enter | Tanlaydi |
| Esc | Yopadi |
| Home, End | Birinçi / oxirgi |
APG Combobox + Tree Popup: input role="combobox" (aria-expanded, aria-controls, aria-activedescendant), popup içida role="tree" / "treeitem" / "group", tugunlarda aria-expanded va aria-selected. Esc tanlanmagan matnni qaytaradi. Tanlangan tugun ✓ belgisi va rang bilan.
Naqş: WAI-ARIA APG combobox · rol combobox
Kod
AI uçun: qaçon işlatiladi
- Çuqur ierarxiya: bölimlar, toifalar, fayl papkalari; qidirib topiş ham kerak.
- 2–3 darajali oddiy yöl →
cascader - Tekis röyxat →
combobox - Bir darajali röyxat uçun işlatmang — `select` yoki `combobox`.
- Barg bölmagan tugun tanlanmasa kerak bölsa, `data-leaf-only` qöying — foydalanuvçi “nega bosilmadi” deb öylamasin (papka oçiladi).
- Köp tanlov kerak bölsa — `multiselect` yoki checkbox daraxti.
npx foxui add treeselect
<div class="fx-treeselect" data-fx-treeselect>
<input class="fx-input" role="combobox" aria-label="Bölim" placeholder="Bölimni tanlang" autocomplete="off" aria-controls="ts-1">
<input type="hidden" name="bolim">
<div class="fx-treeselect__popup">
<ul class="fx-treeselect__tree" role="tree" id="ts-1" aria-label="Bölimlar">
<li role="treeitem" data-value="sotuv" aria-expanded="true"><div class="fx-treeselect__row"><span class="fx-treeselect__twisty"></span>Sotuv</div><ul role="group"><li role="treeitem" data-value="sotuv-b2b"><div class="fx-treeselect__row"><span class="fx-treeselect__twisty"></span>Korporativ</div></li><li role="treeitem" data-value="sotuv-b2c"><div class="fx-treeselect__row"><span class="fx-treeselect__twisty"></span>Çakana</div></li></ul></li>
<li role="treeitem" data-value="it" aria-expanded="false"><div class="fx-treeselect__row"><span class="fx-treeselect__twisty"></span>IT</div><ul role="group"><li role="treeitem" data-value="it-dev"><div class="fx-treeselect__row"><span class="fx-treeselect__twisty"></span>Dasturlaş</div></li><li role="treeitem" data-value="it-ops"><div class="fx-treeselect__row"><span class="fx-treeselect__twisty"></span>Server va xavfsizlik</div></li></ul></li>
<li role="treeitem" data-value="buxg"><div class="fx-treeselect__row"><span class="fx-treeselect__twisty"></span>Buxgalteriya</div></li>
</ul>
</div>
</div>Tokenlar: --fx-bg-muted --fx-bg-pressed --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-standard --fx-font-size-sm --fx-font-weight-medium --fx-motion-fast --fx-popover-width --fx-radius-nav --fx-radius-overlay --fx-shadow-lg --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-brand --fx-text-primary --fx-text-tertiary