Tanlaş · molecule
Til almaştirgiç
Sayt tilini tanlaş: pill tugma — globus, joriy til va strelka; bosilganda tillar menyusi (fx-menu) oçiladi. Balandligi va yoyi mavzu almaştirgiç bilan bir xil — footer'da ikkalasi bir qator bölib turadi (Cursor footer namunasi, Ustoz 19.10). Bandlar havola (til boşqa manzilda, hreflang) yoki tugma (til şu sahifada, «fx-lang» hodisasi). Til nomi öz tilida yoziladi (endonim), tanlangani belgi bilan. data-apply="html" — tanlanganda <html lang> ham özgaradi (faqat xulq).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | defaultcompact globus + qisqa kod (UZ) | default |
Anatomiya
- root
.fx-langswitchşart - trigger
.fx-langswitch__triggerşart - icon
.fx-langswitch__iconixtiyoriy - name
.fx-langswitch__nameixtiyoriy - code
.fx-langswitch__codeixtiyoriy - caret
.fx-langswitch__caretixtiyoriy - menu
.fx-langswitch__menuşart - endonym
.fx-langswitch__endonymixtiyoriy - hint
.fx-langswitch__hintixtiyoriy
Holatlar
openselected
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space, ↓ | Röyxatni oçadi |
| ↑ ↓ Home End | Tillar böylab yuradi |
| Enter | Tilni tanlaydi |
| Esc | Yopadi, fokus tugmaga qaytadi |
Tugma aria-haspopup="menu" + aria-expanded; aria-label joriy tilni aytadi. Bandlar role="menuitemradio" + aria-checked, har biri lang atributi bilan (ekran öquvçi nomni töğri talaffuz qiladi). Ixçam variantda töliq nom ekran öquvçi uçun qoladi.
Naqş: WAI-ARIA APG menu-button · rol menu
Kod
AI uçun: qaçon işlatiladi
Işlating
- Sayt footer'i (mavzu almaştirgiç yonida), sarlavha öng çeti, sozlamalar.
Işlatmang
- Forma içida til maydoni (masalan, kontent tili) →
select - 2 ta til va joy kam →
segment - Til nomini bayroq bilan almaştirmang — bayroq davlat, til emas (özbek tili bitta, bayroqlar köp).
- Til nomlarini joriy tilga tarjima qilmang — har til öz nomida: «Özbekça», «Русский», «English».
- Faqat ikonli tugma qilmang — joriy til körinib tursin; ixçam variantda ham kod (UZ) körinadi.
npx foxui add langswitch
<div class="fx-langswitch" data-fx-langswitch>
<button class="fx-langswitch__trigger" type="button" popovertarget="ls1" aria-haspopup="menu" aria-label="Til: Özbekça"><svg class="fx-langswitch__icon" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7.25" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M2.75 10h14.5M10 2.75c2 2 3 4.5 3 7.25s-1 5.25-3 7.25c-2-2-3-4.5-3-7.25s1-5.25 3-7.25z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg><span class="fx-langswitch__name">Özbekça</span><span class="fx-langswitch__code" aria-hidden="true">UZ</span><svg class="fx-langswitch__caret" viewBox="0 0 20 20" aria-hidden="true"><path d="M5.5 8l4.5 4.5L14.5 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<div class="fx-menu fx-langswitch__menu" id="ls1" role="menu" aria-label="Tilni tanlang" popover data-fx-menu>
<button class="fx-menu__item" type="button" data-value="uz" role="menuitemradio" aria-checked="true" lang="uz"><span class="fx-langswitch__endonym">Özbekça</span><span class="fx-langswitch__hint">UZ</span></button>
<button class="fx-menu__item" type="button" data-value="ru" role="menuitemradio" aria-checked="false" lang="ru"><span class="fx-langswitch__endonym">Русский</span><span class="fx-langswitch__hint">RU</span></button>
<button class="fx-menu__item" type="button" data-value="en" role="menuitemradio" aria-checked="false" lang="en"><span class="fx-langswitch__endonym">English</span><span class="fx-langswitch__hint">EN</span></button>
</div>
</div>
<!-- Ixcham: globus + kod; tillar boshqa manzilda (havola) -->
<div class="fx-langswitch" data-variant="compact" data-fx-langswitch>
<button class="fx-langswitch__trigger" type="button" popovertarget="ls2" aria-haspopup="menu" aria-label="Til: Özbekça"><svg class="fx-langswitch__icon" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7.25" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M2.75 10h14.5M10 2.75c2 2 3 4.5 3 7.25s-1 5.25-3 7.25c-2-2-3-4.5-3-7.25s1-5.25 3-7.25z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg><span class="fx-langswitch__name">Özbekça</span><span class="fx-langswitch__code" aria-hidden="true">UZ</span><svg class="fx-langswitch__caret" viewBox="0 0 20 20" aria-hidden="true"><path d="M5.5 8l4.5 4.5L14.5 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<div class="fx-menu fx-langswitch__menu" id="ls2" role="menu" aria-label="Tilni tanlang" popover data-fx-menu>
<a class="fx-menu__item" href="/" hreflang="uz" role="menuitemradio" aria-checked="true" lang="uz"><span class="fx-langswitch__endonym">Özbekça</span><span class="fx-langswitch__hint">UZ</span></a>
<a class="fx-menu__item" href="/ru/" hreflang="ru" role="menuitemradio" aria-checked="false" lang="ru"><span class="fx-langswitch__endonym">Русский</span><span class="fx-langswitch__hint">RU</span></a>
<a class="fx-menu__item" href="/en/" hreflang="en" role="menuitemradio" aria-checked="false" lang="en"><span class="fx-langswitch__endonym">English</span><span class="fx-langswitch__hint">EN</span></a>
</div>
</div>
<!-- Footer qatori: mavzu (ikonli, «Tizim» birinchi) + til — Cursor footer namunasidagi juftlik -->
<div class="fx-cluster" data-gap="3">
<div class="fx-segment fx-theme-switcher" data-variant="icon" role="group" aria-label="Mavzu" data-fx-themeswitch>
<button class="fx-segment__item" type="button" data-value="system" aria-pressed="true"><svg class="fx-theme-switcher__icon" viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="4" width="15" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M7 17h6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><span class="fx-theme-switcher__label">Tizim</span></button>
<button class="fx-segment__item" type="button" data-value="light" aria-pressed="false"><svg class="fx-theme-switcher__icon" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="3.2" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M10 2.5v2M10 15.5v2M2.5 10h2M15.5 10h2M4.7 4.7l1.4 1.4M13.9 13.9l1.4 1.4M4.7 15.3l1.4-1.4M13.9 6.1l1.4-1.4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><span class="fx-theme-switcher__label">Yoruğ</span></button>
<button class="fx-segment__item" type="button" data-value="dark" aria-pressed="false"><svg class="fx-theme-switcher__icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M16.5 11.5A6.5 6.5 0 0 1 8.5 3.5a6.5 6.5 0 1 0 8 8z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg><span class="fx-theme-switcher__label">Qoronği</span></button>
</div>
<div class="fx-langswitch" data-fx-langswitch>
<button class="fx-langswitch__trigger" type="button" popovertarget="ls3" aria-haspopup="menu" aria-label="Til: Özbekça"><svg class="fx-langswitch__icon" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7.25" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M2.75 10h14.5M10 2.75c2 2 3 4.5 3 7.25s-1 5.25-3 7.25c-2-2-3-4.5-3-7.25s1-5.25 3-7.25z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg><span class="fx-langswitch__name">Özbekça</span><span class="fx-langswitch__code" aria-hidden="true">UZ</span><svg class="fx-langswitch__caret" viewBox="0 0 20 20" aria-hidden="true"><path d="M5.5 8l4.5 4.5L14.5 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<div class="fx-menu fx-langswitch__menu" id="ls3" role="menu" aria-label="Tilni tanlang" popover data-fx-menu>
<button class="fx-menu__item" type="button" data-value="uz" role="menuitemradio" aria-checked="true" lang="uz"><span class="fx-langswitch__endonym">Özbekça</span><span class="fx-langswitch__hint">UZ</span></button>
<button class="fx-menu__item" type="button" data-value="ru" role="menuitemradio" aria-checked="false" lang="ru"><span class="fx-langswitch__endonym">Русский</span><span class="fx-langswitch__hint">RU</span></button>
<button class="fx-menu__item" type="button" data-value="en" role="menuitemradio" aria-checked="false" lang="en"><span class="fx-langswitch__endonym">English</span><span class="fx-langswitch__hint">EN</span></button>
</div>
</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-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-knob-pill --fx-motion-fast --fx-radius-control --fx-size-icon-sm --fx-space-2 --fx-space-3 --fx-text-brand --fx-text-primary --fx-text-secondary --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).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).Rang tanlagiçRang namunalaridan tanlaş: native radio (bitta) yoki checkbox (bir neçta), JS'siz.