Qatlamlar · pattern
Sessiya tugaşi ogohlantirişi
Xavfsizlik uçun sessiya muddati tugaşidan oldingi ogohlantiriş (4.197, GOV.UK/HMRC «Timeout warning»): modal alertdialog (fx-dialog ustida) data-warn soniya (standart 120) qolganda özi oçiladi — soat belgisi, katta teskari sanoq, qolgan vaqt çiziği va ikki tugma: «Davom etiş» (asosiy, autofocus, Esc ham şu) va «Çiqiş». data-timeout — sessiya muddati (soniya); ogohlantirişgaça foydalanuvçi faolligi taymerni qayta boşlaydi (data-activity="off" — faqat server muddati). 30 soniyadan kam qolganda data-state="urgent". Tugaganda .fx-sessionwarn__expired körinadi va «fx-sessionwarn-expired» hodisasi çiqadi. Hodisalar: fx-sessionwarn-extend (ilova sessiyani serverda uzaytiradi), fx-sessionwarn-signout (data-signout-url bölsa — öşa manzilga). Dasturiy: el.fxSession.reset() / .warn(soniya).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-activity | off faollik taymerni qayta boşlamaydi | on |
Anatomiya
- root (dialog.fx-dialog)
.fx-sessionwarnşart - main
.fx-sessionwarn__mainşart - icon
.fx-sessionwarn__iconixtiyoriy - text
.fx-sessionwarn__textixtiyoriy - time (sanoq)
.fx-sessionwarn__timeşart - bar
.fx-sessionwarn__barixtiyoriy - expired
.fx-sessionwarn__expiredixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | Fokusdagi tugma (oçilganda — «Davom etiş») |
| Esc | Davom etiş — sessiya uzaytiriladi |
| Tab | Ikki tugma orasida (fokus oyna içida) |
<dialog role="alertdialog" closedby="none" aria-labelledby aria-describedby> — modal: fokus tuzoği brauzerda, oçilganda fokus «Davom etiş»da (autofocus), yopilganda çaqirgan elementga qaytadi. Esc = Davom etiş (WCAG 2.2.1 — vaqtni uzaytiriş oson). Körinadigan sanoq aria-hidden, alohida aria-live="assertive" hudud faqat har daqiqada, 20 soniyada va tugaganda gapiradi. Şoşilinç holat rang bilan birga raqam va sözda.
Naqş: WAI-ARIA APG alertdialog · rol alertdialog
Kod
AI uçun: qaçon işlatiladi
- Bank, davlat xizmati, CRM va admin panellarida sessiya muddati bor bölsa.
- Uzun forma töldirilayotgan, ma'lumot yöqolişi mumkin bölgan sahifalar.
- Aksiya yoki taklif tugaşiga sanoq →
countdown - Oddiy tasdiq oynasi →
dialog - Internet uzilgani haqida xabar →
offline - Ogohlantirişsiz çiqarib yubormang — kamida 2 daqiqa oldin ayting (WCAG 2.2.1).
- Har soniyani ekran öquvçiga aytmang — faqat oçilganda, har daqiqada va oxirgi 20 soniyada.
- Taşqariga bosiş bilan yopiladigan qilmang — tanlov aniq bölsin; Esc esa «Davom etiş» deb hisoblanadi.
- Muddat tugagaç ma'lumotni jimgina taşlab yubormang — iloji bölsa qoralamani saqlang va buni ayting.
npx foxui add sessionwarn
<button class="fx-btn" type="button" data-sessionwarn-open="sw1">Ogohlantirişni körsatiş (namuna)</button>
<dialog class="fx-dialog fx-sessionwarn" id="sw1" data-fx-sessionwarn data-timeout="900" data-warn="120" data-signout-url="#chiqish" role="alertdialog" closedby="none" aria-labelledby="sw1-t" aria-describedby="sw1-d" data-size="sm">
<div class="fx-sessionwarn__main">
<span class="fx-sessionwarn__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2.5 2M9 2h6"/></svg></span>
<h2 class="fx-dialog__title" id="sw1-t">Sessiya tugayapti</h2>
<p class="fx-sessionwarn__text" id="sw1-d">Xavfsizlik uçun faolsiz qolgan hisobdan avtomatik çiqasiz. Saqlanmagan özgarişlar yöqolişi mumkin.</p>
<span class="fx-sessionwarn__time" aria-hidden="true">2:00</span>
<span class="fx-sessionwarn__bar" aria-hidden="true"></span>
<div class="fx-dialog__actions"><button class="fx-btn" type="button" data-sessionwarn="signout">Çiqiş</button><button class="fx-btn" type="button" data-variant="primary" data-sessionwarn="extend" autofocus>Davom etiş</button></div>
</div>
<div class="fx-sessionwarn__expired" hidden>
<span class="fx-sessionwarn__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg></span>
<h2 class="fx-dialog__title">Sessiya tugadi</h2>
<p class="fx-sessionwarn__text">Xavfsizlik uçun tizimdan çiqdingiz. Davom etiş uçun qayta kiring.</p>
<div class="fx-dialog__actions"><a class="fx-btn" data-variant="primary" href="#kirish">Qayta kiriş</a></div>
</div>
</dialog>Tokenlar: --fx-bg-muted --fx-bg-warning-subtle --fx-control-h-lg --fx-ease-standard --fx-fg-error --fx-fg-warning --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-display-md --fx-font-size-sm --fx-font-weight-semibold --fx-line-height-tight --fx-motion-base --fx-motion-slower --fx-radius-circle --fx-radius-pill --fx-sessionwarn-left --fx-size-icon-lg --fx-space-1 --fx-space-3 --fx-text-error --fx-text-primary --fx-text-secondary