Holat va javob · pattern
Interruption sahifasi
Davom etişdan oldin biliş ŞART bölgan bitta muhim xabar sahifasi (4.198, GOV.UK «Interruption pages»): butun ekran (yoki katta blok) rangli panel — sarlavha, qisqa matn yoki 2–4 bandli röyxat, ixtiyoriy «Tuşundim» belgisi (required — forma özi tekşiradi, JS kerak emas) va bitta asosiy harakat: «Davom etiş» + ikkinçi darajali havola («Ortga», «Keyinroq»). Masalan: tölov qaytarilmasligi, tarif özgarişi oqibati, qonuniy talab, ma'lumot öçirilişidan oldin. data-tone: brand (standart — töq rangli panel), warning (ehtiyot — sariq fon, qalin çap çiziq), neutral. data-size: page (ekran balandligida, markazda) yoki block (sahifa içida).
Import 1 284 ta mijozni yangilaydi
Bir xil telefon raqamli yozuvlar faylidagi ma'lumot bilan almaştiriladi. Eski qiymatlar audit jurnalida 365 kun saqlanadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-tone | brandwarning ehtiyotneutral oq panel, soya | brand |
data-size | pageblock sahifa içida | page |
Anatomiya
- root
.fx-interruptionşart - panel (form yoki section)
.fx-interruption__panelşart - eyebrow
.fx-interruption__eyebrowixtiyoriy - title
.fx-interruption__titleşart - body
.fx-interruption__bodyşart - ack (Tuşundim)
.fx-interruption__ackixtiyoriy - actions
.fx-interruption__actionsşart - continue (asosiy)
.fx-interruption__continueşart - secondary (havola)
.fx-interruption__secondaryixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | «Tuşundim» → «Davom etiş» → ikkinçi havola |
| Space | «Tuşundim» belgisi |
| Enter | Davom etadi (belgi qöyilmagan bölsa — brauzer xabari) |
Sahifa <main> içida bitta panel, h1 sarlavha (tabindex="-1" — sahifaga ötilganda fokus şu yerga qöyilsa, ekran öquvçi xabarni birinçi öqiydi). «Tuşundim» — haqiqiy checkbox + required: brauzer özi xato aytadi. Asosiy tugma matni harakatni aytadi («Tölovga ötiş»), «→» bezak. Panel ranglari kontrast tokenlaridan; yuqori kontrast rejimida çegara çiziladi.
Naqş: WAI-ARIA APG landmarks · rol main
Kod
AI uçun: qaçon işlatiladi
- Qaytarib bölmaydigan tölov, öçiriş, import yoki tarif özgarişidan oldin.
- Qonun yoki xavfsizlik talabi böyiça foydalanuvçi bilişi şart bölgan xabar.
- Kiçik tasdiq («Öçirilsinmi?») →
dialog - Sahifa içidagi eslatma →
callout - Butun sayt böylab e'lon →
banner - Sessiya tugaşi →
sessionwarn - Har qadamda interruption qöymang — faqat oqibati jiddiy va qaytarib bölmaydigan joyda, aks holda odamlar öqimay ötib ketadi.
- Bir sahifaga bir neçta xabar siğdirmang — bitta asosiy fikr, 2–4 band.
- «Davom etiş»dan boşqa asosiy tugma qöymang — ikkinçi yöl oddiy havola.
- Reklama yoki upsell uçun işlatmang — bu foydalanuvçi işonçini yöqotadi.
npx foxui add interruption
<main class="fx-interruption" data-size="block">
<form class="fx-interruption__panel" action="#" aria-labelledby="ir-t">
<p class="fx-interruption__eyebrow">Tölovdan oldin</p>
<h1 class="fx-interruption__title" id="ir-t" tabindex="-1">Yillik obuna puli qaytarilmaydi</h1>
<div class="fx-interruption__body">
<p>«Jamoa, yillik» tarifiga ötsangiz, <strong>1 200 000 söm</strong> bir martada yeçiladi.</p>
<ul><li>Muddatidan oldin bekor qilsangiz, qolgan oylar puli qaytarilmaydi.</li><li>Yuklab olingan versiyalar sizda abadiy qoladi.</li><li>Örinlar sonini istalgan vaqtda oşiriş mumkin.</li></ul>
</div>
<label class="fx-interruption__ack"><input type="checkbox" name="tushundim" required> Şartlarni öqidim va tuşundim</label>
<div class="fx-interruption__actions"><button class="fx-interruption__continue" type="submit">Tölovga ötiş</button><a class="fx-interruption__secondary" href="#">Oylik tarifda qoliş</a></div>
</form>
</main>
<div class="fx-interruption" data-size="block" data-tone="warning" style="margin-block-start: var(--fx-space-10)">
<section class="fx-interruption__panel" aria-labelledby="ir-t2">
<h2 class="fx-interruption__title" id="ir-t2">Import 1 284 ta mijozni yangilaydi</h2>
<div class="fx-interruption__body"><p>Bir xil telefon raqamli yozuvlar faylidagi ma'lumot bilan almaştiriladi. Eski qiymatlar audit jurnalida 365 kun saqlanadi.</p></div>
<div class="fx-interruption__actions"><a class="fx-interruption__continue" href="#">Davom etiş</a><a class="fx-interruption__secondary" href="#">Faylni qayta tanlaş</a></div>
</section>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-page --fx-bg-surface --fx-bg-warning-subtle --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-dialog-width --fx-ease-enter --fx-ease-standard --fx-fg-warning --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-sm --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-weight-semibold --fx-line-height-relaxed --fx-line-height-tight --fx-motion-fast --fx-motion-press --fx-motion-shift-sm --fx-motion-slow --fx-radius-badge --fx-radius-control --fx-radius-overlay --fx-shadow-md --fx-size-checkbox --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-on-brand --fx-text-primary