Tanlaş · pattern
Ötkazgiç
Ikki röyxat: “Mavjud” va “Tanlangan”. Bandlarni belgilab, örtadagi tugma bilan boşqa tomonga ötkazasiz; har panelda hammasini belgilaş, qidiruv va sanagiç. Katta röyxatdan köp band tanlaş (ruxsatlar, ustunlar, a'zolar) uçun. Hodisa `fx-transfer-change`.
Anatomiya
- root
.fx-transferşart - pane
.fx-transfer__paneşart - head
.fx-transfer__headixtiyoriy - count
.fx-transfer__countixtiyoriy - list
.fx-transfer__listşart - item
.fx-transfer__itemşart - empty
.fx-transfer__emptyixtiyoriy - actions
.fx-transfer__actionsşart
Holatlar
checkeddisabled
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Space | Bandni belgilaydi |
| Enter (tugmada) | Belgilanganlarni ötkazadi |
Panel — checkbox röyxati (native, Tab/Space), “hammasini belgilaş” — aralaş holat (indeterminate). Tugmalar belgilangan band yöqda disabled; ötkazilgaç fokus köçirilgan bandga tuşadi. Sanagiç aria-live="polite".
Kod
AI uçun: qaçon işlatiladi
Işlating
- Katta röyxatdan köp band tanlaş va tanlanganlarni körib turiş (ruxsatlar, ustunlar, a'zolar).
Işlatmang
- Oz sonli variant →
check - Qidiruvli köp tanlov (chip) →
multiselect - 10 tadan kam band uçun işlatmang — checkbox guruhi yetadi.
- Tartib muhim bölsa (ustun tartibi) — alohida tartiblaş qöşing, ötkazgiç tartibni saqlamaydi.
- Ötkaziş tugmalarini faqat ikon qilib aria-label'siz qoldirmang.
npx foxui add transfer
<div class="fx-transfer" data-fx-transfer role="group" aria-label="Hisobot ustunlari">
<section class="fx-transfer__pane" data-pane="source" data-empty="Hammasi tanlangan">
<div class="fx-transfer__head"><label class="fx-check"><input type="checkbox" data-all><span class="fx-check__box"></span>Mavjud</label><span class="fx-transfer__count" data-count aria-live="polite"></span></div>
<input class="fx-input" data-size="sm" type="search" placeholder="Qidiriş" aria-label="Mavjud ustunlardan qidiriş">
<ul class="fx-transfer__list"><li class="fx-transfer__item"><label class="fx-check"><input type="checkbox" value="ism"><span class="fx-check__box"></span>Ism</label></li><li class="fx-transfer__item"><label class="fx-check"><input type="checkbox" value="tel"><span class="fx-check__box"></span>Telefon</label></li><li class="fx-transfer__item"><label class="fx-check"><input type="checkbox" value="manba"><span class="fx-check__box"></span>Manba</label></li><li class="fx-transfer__item"><label class="fx-check"><input type="checkbox" value="menejer"><span class="fx-check__box"></span>Menejer</label></li><li class="fx-transfer__item"><label class="fx-check"><input type="checkbox" value="summa"><span class="fx-check__box"></span>Summa</label></li></ul>
</section>
<div class="fx-transfer__actions">
<button type="button" class="fx-btn" data-variant="outline" data-size="sm" data-shape="icon" data-move="right" aria-label="Tanlanganlarni öngga ötkaziş" disabled>→</button>
<button type="button" class="fx-btn" data-variant="outline" data-size="sm" data-shape="icon" data-move="left" aria-label="Tanlanganlarni çapga qaytariş" disabled>←</button>
</div>
<section class="fx-transfer__pane" data-pane="target" data-empty="Hali heç narsa tanlanmagan">
<div class="fx-transfer__head"><label class="fx-check"><input type="checkbox" data-all><span class="fx-check__box"></span>Tanlangan</label><span class="fx-transfer__count" data-count aria-live="polite"></span></div>
<input class="fx-input" data-size="sm" type="search" placeholder="Qidiriş" aria-label="Tanlanganlardan qidiriş">
<ul class="fx-transfer__list"><li class="fx-transfer__item"><label class="fx-check"><input type="checkbox" value="sana"><span class="fx-check__box"></span>Sana</label></li></ul>
</section>
</div>Tokenlar: --fx-bg-brand-subtle --fx-bg-muted --fx-bg-pressed --fx-bg-surface --fx-border-color-surface --fx-border-width-default --fx-control-h-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-radius-nav --fx-radius-surface --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-6 --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.Variantlar röyxatiCombobox 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.Bildirişnoma sozlamalariBildirişnoma sozlamalari matritsasi (naqş): qatorlar — hodisalar (Savdo, Vazifalar, Xavfsizlik guruhlari), ustunlar — kanallar (Email, Telegram, Ilova).