Tanlaş · molecule
Variantlar röyxati
Combobox va buyruqlar oynasining içki röyxati: guruh sarlavhasi, variant (ikonka yoki avatar, nom, izoh, öngda maslahat), faol variant, köp tanlovda ✓ (aria-multiselectable), «Yaratiş» varianti, böş holat. Özi alohida işlatilmaydi.
- Viloyatlar
- Toşkent
- Samarqand
- Farğona vodiy
- Aziz Karimov[email protected]
- Bobur Toshmatov[email protected]
Anatomiya
- root
.fx-listboxşart - group
.fx-listbox__groupixtiyoriy - option
.fx-optionşart - hint
.fx-option__hintixtiyoriy - body
.fx-option__bodyixtiyoriy - description
.fx-option__descixtiyoriy - empty
.fx-listbox__emptyixtiyoriy
Holatlar
activeselectedcreate
Klaviatura va kiriş
role="listbox" / "option"; faol variant aria-activedescendant orqali (input'da).
Naqş: WAI-ARIA APG listbox · rol listbox
Kod
AI uçun: qaçon işlatiladi
Işlating
- Combobox va buyruqlar oynasi içida.
Işlatmang
- Amallar röyxati →
menu - Röyxatni combobox yoki buyruqlar oynasisiz alohida qöymang.
npx foxui add listbox
<ul class="fx-listbox" role="listbox" aria-label="Viloyatlar"> <li class="fx-listbox__group" role="presentation">Viloyatlar</li> <li class="fx-option" role="option" id="o1" data-active>Toşkent</li> <li class="fx-option" role="option" id="o2" aria-selected="true">Samarqand</li> <li class="fx-option" role="option" id="o3">Farğona <span class="fx-option__hint">vodiy</span></li> </ul> <ul class="fx-listbox" role="listbox" aria-multiselectable="true" aria-label="Mas'ullar"> <li class="fx-option fx-option--lg" role="option" id="p1" aria-selected="true"><span class="fx-avatar" data-size="sm" data-color="yellow" aria-hidden="true">AK</span><span class="fx-option__body">Aziz Karimov<span class="fx-option__desc">[email protected]</span></span></li> <li class="fx-option fx-option--lg" role="option" id="p2"><span class="fx-avatar" data-size="sm" data-color="green" aria-hidden="true">BT</span><span class="fx-option__body">Bobur Toshmatov<span class="fx-option__desc">[email protected]</span></span></li> </ul>
Tokenlar: --fx-bg-muted --fx-bg-pressed --fx-control-h-md --fx-control-h-sm --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-radius-nav --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-6 --fx-text-brand --fx-text-primary --fx-text-tertiary
Şu toifadan
Kaskad tanlovIçma-iç tanlov (viloyat → tuman → mahalla): tugma bosilsa ustunlar ketma-ket yonma-yon oçiladi, oxirgi bandni tanlaş butun yölni (“Samarqand / Urgut”) yozadi.Checkbox, radio, switchCheckbox, radio, switch — native input + körinadigan quti.ChipFiltr çipi (bosiladi, tanlangani teskari rangda, içida son — alohida belgi) yoki teg (× bilan olib taşlanadi).Til almaştirgiçSayt tilini tanlaş: pill tugma — globus, joriy til va strelka; bosilganda tillar menyusi (fx-menu) oçiladi.Bildirişnoma sozlamalariBildirişnoma sozlamalari matritsasi (naqş): qatorlar — hodisalar (Savdo, Vazifalar, Xavfsizlik guruhlari), ustunlar — kanallar (Email, Telegram, Ilova).Rang tanlagiçRang namunalaridan tanlaş: native radio (bitta) yoki checkbox (bir neçta), JS'siz.