Ma'lumot · compound
Virtual röyxat
Minglab bandli röyxat (4.137): 10 000 mijoz, mahsulot katalogi, mahallalar — DOMda faqat körinadigan qatorlar va kiçik zaxira çiziladi, aylantiriş silliq qoladi (hozirgaça faqat datagrid'da bor edi). APG listbox: fokus röyxatda (aria-activedescendant), ↑ ↓ PgUp PgDn Home End, harf bosib qidiriş, Enter/Böşliq tanlaydi; köp tanlovda Shift+↑↓ va Ctrl+A. Har bandda aria-setsize / aria-posinset. Ma'lumot içidagi <script type="application/json"> yoki element.fxVirtual.setItems(massiv) bilan.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | mdsm | md |
aria-multiselectable | true bir neçta tanlaş | false |
Anatomiya
- root
.fx-virtuallistşart - space
.fx-virtuallist__spaceşart - window
.fx-virtuallist__windowşart - item
.fx-virtuallist__itemşart - label
.fx-virtuallist__labelixtiyoriy - meta
.fx-virtuallist__metaixtiyoriy - count
.fx-virtuallist__countixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ↑ ↓ | Oldingi / keyingi band |
| PageUp / PageDown | Bir sahifa |
| Home / End | Birinçi / oxirgi band |
| Harf | Şu harfdan boşlanadigan keyingi band |
| Enter / Boʻshliq | Tanlaydi (köp tanlovda — almaştiradi) |
| Shift + ↑ ↓ | Köp tanlovda: tanlovni kengaytiradi |
| Ctrl+A | Köp tanlovda: hammasini tanlaydi |
role="listbox" (tabindex=0, aria-activedescendant → faol band), bandlar role="option" + aria-setsize, aria-posinset, aria-selected. Faol band çiziladi (aylantirib körsatiladi). Tanlangan — ✓ va qalin (rangdan taşqari).
Naqş: WAI-ARIA APG listbox · rol listbox
Kod
AI uçun: qaçon işlatiladi
- Minglab bandli röyxatdan tanlaş: mijoz, mahsulot, manzil.
- Combobox / tanlov oynasi içidagi uzun röyxat.
- Qisqa röyxat (200 tagaça) →
listbox - Ustunli katta jadval →
datagrid - Yozib qidirib tanlaş →
combobox - 200 tadan kam bandga virtual röyxat qilmang — oddiy listbox yengil va brauzer qidiruvi (Ctrl+F) işlaydi.
- Bandlarni turli balandlikda qilmang — qator balandligi bitta (birinçi qatordan ölçanadi).
- Virtual röyxatda Ctrl+F işlamasligini unutmang — yoniga qidiruv maydoni qöying.
npx foxui add virtuallist
<div class="fx-field" style="max-inline-size:26rem">
<span class="fx-label" id="vl1-l">Mijozlar bazasi <span class="fx-virtuallist__count" data-fx-virtuallist-count="vl1"></span></span>
<div class="fx-virtuallist" id="vl1" data-fx-virtuallist data-demo="10000" data-name="mijoz" aria-labelledby="vl1-l"></div>
</div>
<div class="fx-field" style="max-inline-size:26rem;margin-block-start:var(--fx-space-4)">
<span class="fx-label" id="vl2-l">Yetkazib beriş hududlari (bir neçta)</span>
<div class="fx-virtuallist" data-fx-virtuallist data-size="sm" aria-multiselectable="true" aria-labelledby="vl2-l" style="--fx-virtuallist-height: 12rem"><script type="application/json">[{"label":"Toşkent şahri","meta":"12 tuman"},{"label":"Toşkent viloyati","meta":"15 tuman"},{"label":"Samarqand","meta":"14 tuman"},{"label":"Buxoro","meta":"11 tuman"},{"label":"Andijon","meta":"14 tuman"},{"label":"Namangan","meta":"11 tuman"},{"label":"Farğona","meta":"15 tuman"},{"label":"Qaşqadaryo","meta":"13 tuman"},{"label":"Surxondaryo","meta":"14 tuman"},{"label":"Jizzax","meta":"12 tuman"},{"label":"Sirdaryo","meta":"8 tuman"},{"label":"Navoiy","meta":"8 tuman"},{"label":"Xorazm","meta":"11 tuman"},{"label":"Qoraqalpoğiston","meta":"16 tuman"}]</script></div>
</div>Tokenlar: --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-control-h-sm --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-radius-control --fx-radius-nav --fx-space-1 --fx-space-12 --fx-space-3 --fx-text-brand --fx-text-primary --fx-text-tertiary