Tanlaş · molecule
Mavzu almaştirgiç
Yoruğ / Qoronği / Tizim tanlovi (#154): <html data-fx-scheme> ni örnatadi («Tizim» — atribut olib taşlanadi, qurilma sozlamasi işlaydi) va tanlovni eslab qoladi. fx-segment ustiga qurilgan; ixçam ikonli variant. Aylana oçiliş (data-reveal="circle"): yangi mavzu bosilgan tugmadan aylana bölib butun ekranga yoyiladi (View Transitions + clip-path); qöllanmasa, harakat kamaytirilsa yoki data-fx-motion="none"da — darhol almaşadi. Bitta tugma (data-cycle — masalan admin qobiğı rels pastida): bosilsa yoruğ ↔ qoronği, aria-pressed = qoronği. Switch (data-variant="switch", Ustoz 25.10): kun/tun — kapsula ustida quyoş va oy, tutqiç joriy rejim ostiga suriladi; bitta tugma role="switch", aria-checked = qoronği. Boşlanğiç holat SSR'da aria-checked bilan beriladi; data-attr (masalan data-theme) va data-store="none" — saqlaş loyihada, har almaşuvda «fx-themeswitch» hodisasi (detail.scheme). Aylana oçiliş — data-reveal="circle".
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | texticon ixçam, faqat ikonlarswitch kun/tun switch — role="switch" + data-cycle | text |
data-reveal | nonecircle tugmadan aylana oçiliş (View Transitions) | none |
data-size | md switch: 56 × 28sm switch: 48 × 24 — ziç joy | md |
Anatomiya
- root
.fx-theme-switcherşart - icon
.fx-theme-switcher__iconixtiyoriy - label
.fx-theme-switcher__labelixtiyoriy - track
.fx-theme-switcher__trackixtiyoriy - knob
.fx-theme-switcher__knobixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter, Space | Mavzuni tanlaydi |
| Space, Enter | Switch: yoruğ ↔ qoronği |
role="group" + aria-label; tanlangani aria-pressed="true" (rang bilan birga tanlov şakli ham farq qiladi); ikonli variantda yorliq ekran öquvçi uçun. Switch: role="switch", aria-checked (true = qoronği), aria-label «Qoronği rejim»; Space va Enter almaştiradi, fokus halqasi tugmada.
Naqş: WAI-ARIA APG toolbar · rol group
Kod
AI uçun: qaçon işlatiladi
- Sayt footer'i, sozlamalar, profil menyusi.
- Mavzu rangini (brend kutubxonasi) tanlaş →
select - Oddiy ikki holat almaştirgiçi →
segment - Faqat ikonli variantda yorliqni olib taşlamang — .fx-theme-switcher__label ekran öquvçi uçun qoladi.
- Ikki tugmali «oy/quyoş» juftligini alohida tugmalar qilib yasamang — kun/tun uçun bitta switch (data-variant="switch"); «Tizim» kerak bölsa — segment.
- Aylana oçilişni sahifadagi har bir almaştirgiçga qöymang — bitta asosiy (header) yetarli.
npx foxui add theme-switcher
<button class="fx-theme-switcher" data-variant="switch" type="button" role="switch" aria-checked="false" aria-label="Qoronği rejim" data-fx-themeswitch data-cycle> <span class="fx-theme-switcher__track" aria-hidden="true"><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><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__knob"></span></span> </button> <div class="fx-segment fx-theme-switcher" role="group" aria-label="Mavzu" data-fx-themeswitch> <button class="fx-segment__item" type="button" data-value="light" aria-pressed="false">Yoruğ</button> <button class="fx-segment__item" type="button" data-value="dark" aria-pressed="false">Qoronği</button> <button class="fx-segment__item" type="button" data-value="system" aria-pressed="true">Tizim</button> </div> <div class="fx-segment fx-theme-switcher" data-variant="icon" role="group" aria-label="Mavzu (ixçam)" data-fx-themeswitch> <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> <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> </div> <div class="fx-segment fx-theme-switcher" data-variant="icon" role="group" aria-label="Mavzu (aylana bilan)" data-fx-themeswitch data-reveal="circle"> <button class="fx-segment__item" type="button" data-value="light" aria-pressed="false"><span class="fx-theme-switcher__label">Yoruğ</span>☀</button> <button class="fx-segment__item" type="button" data-value="dark" aria-pressed="false"><span class="fx-theme-switcher__label">Qoronği</span>☾</button> <button class="fx-segment__item" type="button" data-value="system" aria-pressed="true"><span class="fx-theme-switcher__label">Tizim</span>◐</button> </div>
Tokenlar: --fx-bg-muted --fx-bg-muted-hover --fx-bg-pressed --fx-bg-surface --fx-border-color-default --fx-border-width-default --fx-ease-standard --fx-motion-base --fx-radius-circle --fx-radius-pill --fx-shadow-sm --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-6 --fx-text-primary --fx-text-tertiary --fx-z-raised