Karkas · pattern
Sozlamalar sahifasi
Sozlamalar uçun tayyor qolip: çapda bölimlar menyusi (mobilda gorizontal), öngda bölimlar — sarlavha, izoh va karta içida «yorliq çapda, boşqaruv öngda» qatorlari; xavfli hudud varianti va yopişqoq saqlaş paneli. Faqat CSS.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-tone | defaultdanger Xavfli hudud | default |
Anatomiya
- root
.fx-settingsşart - nav
.fx-settings__navixtiyoriy - link
.fx-settings__linkixtiyoriy - main
.fx-settings__mainşart - section
.fx-settings__sectionixtiyoriy - title
.fx-settings__titleixtiyoriy - desc
.fx-settings__descixtiyoriy - card
.fx-settings__cardixtiyoriy - row
.fx-settings__rowixtiyoriy - label
.fx-settings__labelixtiyoriy - name
.fx-settings__nameixtiyoriy - hint
.fx-settings__hintixtiyoriy - control
.fx-settings__controlixtiyoriy - foot
.fx-settings__footixtiyoriy
Holatlar
current
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Bölim havolalari, keyin boşqaruvlar |
Menyu <nav aria-label>, joriy bölim aria-current="page"; har bölim <section aria-labelledby> va <h2>. Qator <label> bölsa boşqaruv yorliği avtomatik boğlanadi; yolğiz switch'ga aria-label bering.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Hisob, loyiha yoki jamoa sozlamalari — köp mayda boşqaruv, bölimlarga bölingan.
npx foxui add settings
<div class="fx-settings">
<nav class="fx-settings__nav" aria-label="Sozlamalar bölimlari">
<a class="fx-settings__link" href="#s-profil" aria-current="page">Profil</a>
<a class="fx-settings__link" href="#s-xabar">Xabarnomalar</a>
<a class="fx-settings__link" href="#s-xavf">Xavfli hudud</a>
</nav>
<form class="fx-settings__main">
<section class="fx-settings__section" id="s-profil" aria-labelledby="s-profil-t">
<h2 class="fx-settings__title" id="s-profil-t">Profil</h2>
<p class="fx-settings__desc">Jamoadoşlaringiz sizni şu ma'lumotlar bilan köradi.</p>
<div class="fx-settings__card">
<label class="fx-settings__row"><span class="fx-settings__label"><span class="fx-settings__name">Ism</span><span class="fx-settings__hint">Töliq ismingiz.</span></span><span class="fx-settings__control"><input class="fx-input" value="Aziz Karimov"></span></label>
<label class="fx-settings__row"><span class="fx-settings__label"><span class="fx-settings__name">Email</span><span class="fx-settings__hint">Kiriş va xabarlar uçun.</span></span><span class="fx-settings__control"><input class="fx-input" type="email" value="[email protected]"></span></label>
</div>
</section>
<section class="fx-settings__section" id="s-xabar" aria-labelledby="s-xabar-t">
<h2 class="fx-settings__title" id="s-xabar-t">Xabarnomalar</h2>
<div class="fx-settings__card">
<div class="fx-settings__row"><span class="fx-settings__label"><span class="fx-settings__name">Eslatmalar</span><span class="fx-settings__hint">Kimdir sizni tilga olsa.</span></span><span class="fx-settings__control"><label class="fx-check" data-type="switch"><input type="checkbox" role="switch" checked aria-label="Eslatmalar"><span class="fx-check__box"></span></label></span></div>
<div class="fx-settings__row"><span class="fx-settings__label"><span class="fx-settings__name">Haftalik hisobot</span><span class="fx-settings__hint">Duşanba kuni emailga.</span></span><span class="fx-settings__control"><label class="fx-check" data-type="switch"><input type="checkbox" role="switch" aria-label="Haftalik hisobot"><span class="fx-check__box"></span></label></span></div>
</div>
</section>
<section class="fx-settings__section" id="s-xavf" data-tone="danger" aria-labelledby="s-xavf-t">
<h2 class="fx-settings__title" id="s-xavf-t">Xavfli hudud</h2>
<div class="fx-settings__card"><div class="fx-settings__row"><span class="fx-settings__label"><span class="fx-settings__name">Hisobni öçiriş</span><span class="fx-settings__hint">Bu amalni qaytarib bölmaydi.</span></span><span class="fx-settings__control"><button class="fx-btn" type="button" data-variant="danger">Öçiriş</button></span></div></div>
</section>
<div class="fx-settings__foot"><span class="fx-settings__foot-note">Saqlanmagan özgarişlar bor</span><button class="fx-btn" type="reset">Bekor qiliş</button><button class="fx-btn" type="submit" data-variant="primary">Saqlaş</button></div>
</form>
</div>Tokenlar: --fx-bg-brand-subtle --fx-bg-muted --fx-bg-pressed --fx-bg-surface --fx-border-color-default --fx-border-color-error --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-dialog-width --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-nav-item-height --fx-nav-width --fx-radius-nav --fx-radius-surface --fx-shadow-md --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-error --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan
AkkordeonYiğiladigan bölimlar: native <details>; bir xil name bilan bittasi oçiq qoladi.Maqola sahifasiBlog maqolasi sahifasi (4.178): tepada ortga havola va toifa, sarlavha, lid, muallif qatori (avatar, ism, sana, öqiş vaqti) va muqova; ostida uç ustun — çapda yopişqoq ulaşiş tugmalari (Telegram, Facebook, X, havolani nusxalaş — data-fx-copy), markazda matn (fx-prose, 68 belgi kenglik), öngda mundarija (fx-toc — öqilayotgan bölimni belgilaydi).Kiriş sahifasiKiriş / röyxatdan ötiş sahifasi qolipi: markazda karta yoki çapda forma + öngda brend paneli (split).Bento törLanding xususiyatlarini turli ölçamdagi kataklar mozaikasida körsatiş (4.72): data-span bilan 2×1, 1×2, 2×2 va 3×1 kataklar, böş joylar avtomatik töldiriladi (dense).Bleed (manfiy çet)Içki elementni ota konteyner içki çetidan (padding) çiqarib, töliq enga yoyadi (4.19): karta içidagi jadval, rasm, ajratuvçi.Blog röyxatiBlog boş sahifasi yoki bölimi (4.178): sarlavha, toifa filtri (fx-chip), ixtiyoriy «Tanlangan» katta maqola (data-featured — töliq kenglikda, rasm yonida), kartalar töri va sahifalaş (fx-pagination).