Holat va javob · pattern
Cookie roziligi
Cookie va kuzatuv roziligi naqşi (4.180, GOV.UK Cookie banner; GDPR 2-bosqiç uçun): pastki karta — nima uçun cookie kerakligi bir-ikki gapda, «Qabul qiliş», «Rad etiş» (bir xil vaznli — rad etiş yaşirilmaydi) va «Sozlaş». Sozlaşda toifalar: zarur (doim yoqiq), statistika, marketing — har biri izoh bilan. Tanlovdan keyin karta tasdiq xabariga aylanadi («Siz … qabul qildingiz», «Yaşiriş»), fokus xabarga ötadi. foxui.js tanlovni saqlaydi va "fx-consent" hodisasini yuboradi — skriptlar (analitika) faqat şundan keyin ulanadi. Footer'dagi [data-consent-open] tugmasi sozlamalarni qayta oçadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-position | corner pastki burçakda ixçaminline hujjat içida | bottom |
Anatomiya
- root
.fx-consentşart - main
.fx-consent__mainşart - head
.fx-consent__headixtiyoriy - icon
.fx-consent__iconixtiyoriy - title
.fx-consent__titleşart - text
.fx-consent__textşart - prefs (toifalar)
.fx-consent__prefsixtiyoriy - pref
.fx-consent__prefixtiyoriy - pref-title
.fx-consent__pref-titleixtiyoriy - pref-text
.fx-consent__pref-textixtiyoriy - actions
.fx-consent__actionsşart - done (tasdiq)
.fx-consent__doneixtiyoriy - done-text
.fx-consent__done-textixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Tugmalar va kalitlar orasida |
| Enter, Space | Tanlov; «Sozlaş» toifalarni oçadi / yopadi |
| Space | Toifa kalitini yoqadi / öçiradi |
<section aria-labelledby> — landmark sifatida topiladi. Tugmalar matnli, «Sozlaş» aria-expanded + aria-controls bilan toifalarni oçadi. Toifalar — fieldset + legend, har kalit sarlavhaga aria-labelledby bilan boğlangan; zarur toifa disabled. Tanlovdan keyin fokus tasdiq xabariga ötadi (tabindex=-1), xabar söz bilan.
Naqş: WAI-ARIA APG disclosure · rol region
Kod
AI uçun: qaçon işlatiladi
- Sayt analitika, reklama yoki uçinçi tomon cookie fayllarini işlatsa.
- Footer'da «Cookie sozlamalari» — tanlovni keyin özgartiriş uçun (data-consent-open).
- Sayt faqat zarur cookie işlatsa — oddiy eslatma →
banner - Şartlarga rozilik (forma içida) →
check - «Rad etiş»ni kiçik havola qilib yaşirmang — «Qabul qiliş» bilan bir xil vaznda bölsin.
- Statistika va marketing toifalarini oldindan yoqib qöymang — rozilik faol bölsin.
- Bannerni sahifani tösuvçi modal qilmang — sayt işlab turaversin.
- Tanlovdan oldin analitika skriptini ulamang — "fx-consent" hodisasini kuting.
npx foxui add consent
<section class="fx-consent" data-fx-consent="namuna" data-demo data-position="inline" aria-labelledby="ck-t">
<div class="fx-consent__main">
<div class="fx-consent__head">
<span class="fx-consent__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M21 12.5A9 9 0 1 1 11.5 3a3 3 0 0 0 4 3.5 3 3 0 0 0 3.5 4 3 3 0 0 0 2 2z"/><path d="M8.5 9.5h.01M8 14h.01M12 12h.01M14 16h.01"/></svg></span>
<div>
<h2 class="fx-consent__title" id="ck-t">Cookie fayllar haqida</h2>
<p class="fx-consent__text">Sayt işlaşi uçun zarur cookie fayllardan foydalanamiz. Qöşimçalari — qaysi sahifalar foydali ekanini biliş uçun; ularni özingiz tanlaysiz. <a href="#">Batafsil</a></p>
</div>
</div>
<fieldset class="fx-consent__prefs">
<legend class="fx-sr-only">Cookie toifalari</legend>
<div class="fx-consent__pref"><span><span class="fx-consent__pref-title" id="ck-z">Zarur</span><span class="fx-consent__pref-text">Kiriş, xavfsizlik va sizning tanlovingiz. Öçirib bölmaydi.</span></span><label class="fx-check" data-type="switch"><input type="checkbox" role="switch" name="zarur" checked disabled aria-labelledby="ck-z"><span class="fx-check__box"></span></label></div>
<div class="fx-consent__pref"><span><span class="fx-consent__pref-title" id="ck-s">Statistika</span><span class="fx-consent__pref-text">Qaysi sahifa köp öqilişini nomsiz hisoblaydi.</span></span><label class="fx-check" data-type="switch"><input type="checkbox" role="switch" name="statistika" aria-labelledby="ck-s"><span class="fx-check__box"></span></label></div>
<div class="fx-consent__pref"><span><span class="fx-consent__pref-title" id="ck-m">Marketing</span><span class="fx-consent__pref-text">Reklama samarasini ölçaydi.</span></span><label class="fx-check" data-type="switch"><input type="checkbox" role="switch" name="marketing" aria-labelledby="ck-m"><span class="fx-check__box"></span></label></div>
</fieldset>
<div class="fx-consent__actions">
<button class="fx-btn" data-variant="primary" type="button" data-consent="accept">Qabul qiliş</button>
<button class="fx-btn" type="button" data-consent="reject">Rad etiş</button>
<button class="fx-btn" data-variant="tonal" type="button" data-consent="save">Tanlovni saqlaş</button>
<button class="fx-btn" data-variant="ghost" type="button" data-consent="settings" aria-expanded="false">Sozlaş</button>
</div>
</div>
<div class="fx-consent__done" hidden>
<p class="fx-consent__done-text"></p>
<button class="fx-btn" data-variant="ghost" data-size="sm" type="button" data-consent-open="namuna">Özgartiriş</button>
<button class="fx-btn" data-size="sm" type="button" data-consent="hide">Yaşiriş</button>
</div>
</section>Tokenlar: --fx-bg-category-yellow-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-dialog-width --fx-ease-enter --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-shift-lg --fx-motion-slow --fx-radius-badge --fx-radius-control --fx-radius-overlay --fx-shadow-lg --fx-size-control-sm --fx-size-icon-md --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-text-primary --fx-text-secondary