Tanlaş · pattern
Bildirişnoma sozlamalari
Bildirişnoma sozlamalari matritsasi (naqş): qatorlar — hodisalar (Savdo, Vazifalar, Xavfsizlik guruhlari), ustunlar — kanallar (Email, Telegram, Ilova). Ustun sarlavhasida va qator oxirida «hammasi» (qisman — «–»). Ulanmagan kanal öçiq va «Ulaş» havolasi bilan; xavfsizlik xati — «majburiy».
Anatomiya
- root
.fx-notifprefsşart - channel
.fx-notifprefs__channelixtiyoriy - note
.fx-notifprefs__noteixtiyoriy - group
.fx-notifprefs__groupixtiyoriy - event
.fx-notifprefs__eventşart - desc
.fx-notifprefs__descixtiyoriy - all
.fx-notifprefs__allixtiyoriy - lock
.fx-notifprefs__lockixtiyoriy
Holatlar
mixedoff
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab / Shift+Tab | Checkbox'lar böylab |
| Space | Belgilaş; «hammasi» — butun ustun/qatorni almaştiradi |
Native jadval: kanal — th scope=col, hodisa — th scope=row, guruh — scope=colgroup. Har checkbox aria-label «Yangi ariza — Telegram»; «hammasi» checkbox'lari qisman holatda indeterminate (ekran öquvçi «aralaş» deydi). Native checkbox — Tab va Space.
Naqş: WAI-ARIA APG table · rol table
Kod
AI uçun: qaçon işlatiladi
Işlating
- Profil yoki jamoa sozlamalarida: qaysi hodisa haqida qaysi kanal orqali xabar oliş.
- Bir neçta kanal (email, Telegram, ilova, SMS) va 5+ hodisa bölganda.
Işlatmang
- Bitta yoqiş/öçiriş sozlamasi →
check - Ruxsatlar guruhi (köp tanlov röyxati) →
checklist - Har katakka alohida switch qöymang — matritsada checkbox ixçamroq va «hammasi» bilan yaxşi işlaydi.
- Ulanmagan kanalni yaşirmang — öçiq holda «Ulaş» havolasi bilan körsating, foydalanuvçi imkoniyatni bilsin.
- Majburiy xabarni belgisiz öçiq qilib qöymang — «majburiy» sözi sababini aytadi.
npx foxui add notifprefs
<form class="fx-table-scroll" aria-labelledby="np-t">
<h3 id="np-t" style="margin:0 0 var(--fx-space-3);font-size:var(--fx-font-size-md)">Qaysi xabarlarni qayerga olasiz</h3>
<table class="fx-notifprefs" data-fx-notifprefs>
<thead><tr><th scope="col">Hodisa</th><th scope="col"><span class="fx-notifprefs__channel"><label class="fx-check"><input type="checkbox" data-col-all="email" aria-label="Email: hammasi"><span class="fx-check__box"></span></label>Email</span></th><th scope="col"><span class="fx-notifprefs__channel"><label class="fx-check"><input type="checkbox" data-col-all="telegram" aria-label="Telegram: hammasi"><span class="fx-check__box"></span></label>Telegram</span></th><th scope="col" data-off><span class="fx-notifprefs__channel"><label class="fx-check"><input type="checkbox" data-col-all="app" disabled aria-label="Ilova: hammasi"><span class="fx-check__box"></span></label>Ilova<span class="fx-notifprefs__note">Ulanmagan · <a href="#">Ulaş</a></span></span></th><th scope="col" class="fx-notifprefs__all">Hammasi</th></tr></thead>
<tbody>
<tr class="fx-notifprefs__group"><th colspan="5" scope="colgroup">Savdo</th></tr>
<tr><th scope="row"><span class="fx-notifprefs__event">Yangi ariza</span><span class="fx-notifprefs__desc">Saytdagi forma yoki Telegram botdan</span></th><td><label class="fx-check"><input type="checkbox" name="ariza.email" data-col="email" checked aria-label="Yangi ariza — Email"><span class="fx-check__box"></span></label></td><td><label class="fx-check"><input type="checkbox" name="ariza.telegram" data-col="telegram" checked aria-label="Yangi ariza — Telegram"><span class="fx-check__box"></span></label></td><td data-off><label class="fx-check"><input type="checkbox" name="ariza.app" data-col="app" disabled aria-label="Yangi ariza — Ilova"><span class="fx-check__box"></span></label></td><td class="fx-notifprefs__all"><label class="fx-check"><input type="checkbox" data-row-all aria-label="Yangi ariza: barça kanallar"><span class="fx-check__box"></span></label></td></tr>
<tr><th scope="row"><span class="fx-notifprefs__event">Tölov tuşdi</span><span class="fx-notifprefs__desc">Summasi va mijoz bilan</span></th><td><label class="fx-check"><input type="checkbox" name="tolov.email" data-col="email" aria-label="Tölov tuşdi — Email"><span class="fx-check__box"></span></label></td><td><label class="fx-check"><input type="checkbox" name="tolov.telegram" data-col="telegram" checked aria-label="Tölov tuşdi — Telegram"><span class="fx-check__box"></span></label></td><td data-off><label class="fx-check"><input type="checkbox" name="tolov.app" data-col="app" disabled aria-label="Tölov tuşdi — Ilova"><span class="fx-check__box"></span></label></td><td class="fx-notifprefs__all"><label class="fx-check"><input type="checkbox" data-row-all aria-label="Tölov tuşdi: barça kanallar"><span class="fx-check__box"></span></label></td></tr>
<tr><th scope="row"><span class="fx-notifprefs__event">Bitim bosqiçi özgardi</span><span class="fx-notifprefs__desc">Siz mas'ul bölgan bitimlar</span></th><td><label class="fx-check"><input type="checkbox" name="bosqich.email" data-col="email" aria-label="Bitim bosqiçi özgardi — Email"><span class="fx-check__box"></span></label></td><td><label class="fx-check"><input type="checkbox" name="bosqich.telegram" data-col="telegram" aria-label="Bitim bosqiçi özgardi — Telegram"><span class="fx-check__box"></span></label></td><td data-off><label class="fx-check"><input type="checkbox" name="bosqich.app" data-col="app" disabled aria-label="Bitim bosqiçi özgardi — Ilova"><span class="fx-check__box"></span></label></td><td class="fx-notifprefs__all"><label class="fx-check"><input type="checkbox" data-row-all aria-label="Bitim bosqiçi özgardi: barça kanallar"><span class="fx-check__box"></span></label></td></tr>
<tr class="fx-notifprefs__group"><th colspan="5" scope="colgroup">Vazifalar</th></tr>
<tr><th scope="row"><span class="fx-notifprefs__event">Vazifa muddati yaqin</span><span class="fx-notifprefs__desc">Muddatdan 1 soat oldin</span></th><td><label class="fx-check"><input type="checkbox" name="muddat.email" data-col="email" checked aria-label="Vazifa muddati yaqin — Email"><span class="fx-check__box"></span></label></td><td><label class="fx-check"><input type="checkbox" name="muddat.telegram" data-col="telegram" checked aria-label="Vazifa muddati yaqin — Telegram"><span class="fx-check__box"></span></label></td><td data-off><label class="fx-check"><input type="checkbox" name="muddat.app" data-col="app" disabled aria-label="Vazifa muddati yaqin — Ilova"><span class="fx-check__box"></span></label></td><td class="fx-notifprefs__all"><label class="fx-check"><input type="checkbox" data-row-all aria-label="Vazifa muddati yaqin: barça kanallar"><span class="fx-check__box"></span></label></td></tr>
<tr><th scope="row"><span class="fx-notifprefs__event">Haftalik hisobot</span><span class="fx-notifprefs__desc">Har duşanba, 09:00</span></th><td><label class="fx-check"><input type="checkbox" name="hisobot.email" data-col="email" checked aria-label="Haftalik hisobot — Email"><span class="fx-check__box"></span></label></td><td><label class="fx-check"><input type="checkbox" name="hisobot.telegram" data-col="telegram" aria-label="Haftalik hisobot — Telegram"><span class="fx-check__box"></span></label></td><td data-off><label class="fx-check"><input type="checkbox" name="hisobot.app" data-col="app" disabled aria-label="Haftalik hisobot — Ilova"><span class="fx-check__box"></span></label></td><td class="fx-notifprefs__all"><label class="fx-check"><input type="checkbox" data-row-all aria-label="Haftalik hisobot: barça kanallar"><span class="fx-check__box"></span></label></td></tr>
<tr class="fx-notifprefs__group"><th colspan="5" scope="colgroup">Xavfsizlik</th></tr>
<tr><th scope="row"><span class="fx-notifprefs__event">Yangi qurilmadan kiriş</span><span class="fx-notifprefs__desc">Şahar va qurilma nomi bilan</span></th><td><label class="fx-check"><input type="checkbox" name="kirish.email" data-col="email" checked disabled aria-label="Yangi qurilmadan kiriş — Email"><span class="fx-check__box"></span></label><span class="fx-notifprefs__lock">majburiy</span></td><td><label class="fx-check"><input type="checkbox" name="kirish.telegram" data-col="telegram" checked aria-label="Yangi qurilmadan kiriş — Telegram"><span class="fx-check__box"></span></label></td><td data-off><label class="fx-check"><input type="checkbox" name="kirish.app" data-col="app" disabled aria-label="Yangi qurilmadan kiriş — Ilova"><span class="fx-check__box"></span></label></td><td class="fx-notifprefs__all"><label class="fx-check"><input type="checkbox" data-row-all aria-label="Yangi qurilmadan kiriş: barça kanallar"><span class="fx-check__box"></span></label></td></tr>
</tbody>
</table>
</form>Tokenlar: --fx-bg-muted --fx-bg-page --fx-bg-subtle --fx-border-color-default --fx-border-width-default --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-font-weight-semibold --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-5 --fx-text-brand --fx-text-disabled --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).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.Rang tanlagiçRang namunalaridan tanlaş: native radio (bitta) yoki checkbox (bir neçta), JS'siz.