Holat va javob · pattern
Xato sahifalari töplami
Töliq xato sahifasi şabloni (4.183): tepada sayt belgisi va kiriş, markazda naqşli fon ustida ulkan kod (404, 500, 503 — tepadan pastga sönuvçi, holat rangida), ostida fx-result (sarlavha, izoh, tugmalar — 500/503/offline holatlari result'da), qidiruv maydoni va foydali havolalar kartalari, pastda ingiçka footer (xato kodi, «xato haqida xabar beriş»). data-status kodning rangini beradi; data-size="block" — hujjat içida namuna sifatida.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-status | 500 kod xato rangida503 kod ogohlantiriş rangida | 404 |
data-size | block hujjat içida namuna | page |
Anatomiya
- root
.fx-errorpageşart - bar
.fx-errorpage__barixtiyoriy - main
.fx-errorpage__mainşart - code (ulkan raqam)
.fx-errorpage__codeixtiyoriy - search
.fx-errorpage__searchixtiyoriy - links
.fx-errorpage__linksixtiyoriy - link
.fx-errorpage__linkixtiyoriy - link-title
.fx-errorpage__link-titleixtiyoriy - link-text
.fx-errorpage__link-textixtiyoriy - footer
.fx-errorpage__footerixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Qidiruv, havolalar va tugmalar orasida |
Bitta <main> va h1 (fx-result__title). Ulkan kod bezak (aria-hidden) — kod söz bilan sarlavha yoki footer'da. Qidiruv — role="search", maydonga yorliq. Havolalar aniq nom bilan, fokus halqasi kartada. Kiriş animatsiyasi prefers-reduced-motion'da yöq.
Kod
AI uçun: qaçon işlatiladi
- Saytning 404, 500, 503 va oflayn sahifalari — bitta şablondan.
- Ruxsat yöq (403) sahifasi — kiriş tugmasi bilan.
- Sahifa içidagi kiçik natija bloki →
result - Röyxat böş →
empty - Xato sahifasida navigatsiyani yöq qilmang — foydalanuvçi qayerga borişni bilsin.
- Hazil bilan muammoni yaşirmang — nima bölgani va nima qiliş kerakligi aniq yozilsin.
- 500 sahifada texnik tafsilot (stack trace) körsatmang — sörov raqami yetarli.
npx foxui add errorpage
<div class="fx-errorpage" data-size="block" data-status="404">
<header class="fx-errorpage__bar"><a class="fx-site-header__brand" href="#" style="color:inherit;text-decoration:none;display:inline-flex;gap:var(--fx-space-2);align-items:center;font-weight:var(--fx-font-weight-semibold)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="6" fill="currentColor"/></svg>Çorsu</a><a class="fx-btn" data-variant="ghost" data-size="sm" href="#">Kiriş</a></header>
<main class="fx-errorpage__main">
<div class="fx-bg" data-pattern="dots" data-glow aria-hidden="true"></div>
<p class="fx-errorpage__code" aria-hidden="true">404</p>
<div class="fx-result" data-status="404">
<h1 class="fx-result__title">Bu sahifa topilmadi</h1>
<p class="fx-result__text">Manzil özgargan yoki sahifa öçirilgan bölişi mumkin. Qidirib köring yoki quyidagi bölimlardan birini tanlang.</p>
</div>
<form class="fx-errorpage__search" role="search" action="#"><label class="fx-sr-only" for="ep-q">Saytdan qidiriş</label><input class="fx-input" id="ep-q" type="search" placeholder="Masalan: narxlar, hujjatlar"><button class="fx-btn" data-variant="primary" type="submit">Qidiriş</button></form>
<ul class="fx-errorpage__links">
<li><a class="fx-errorpage__link" href="#"><span class="fx-errorpage__link-title">Boş sahifa</span><span class="fx-errorpage__link-text">Yangiliklar va asosiy bölimlar</span></a></li>
<li><a class="fx-errorpage__link" href="#"><span class="fx-errorpage__link-title">Hujjatlar</span><span class="fx-errorpage__link-text">Örnatiş va komponentlar</span></a></li>
<li><a class="fx-errorpage__link" href="#"><span class="fx-errorpage__link-title">Yordam</span><span class="fx-errorpage__link-text">Savol yozing — 1 iş kunida javob</span></a></li>
</ul>
</main>
<footer class="fx-errorpage__footer"><span>© 2026 Çorsu</span><span>Xato kodi: 404 · <a href="#">Xato haqida xabar beriş</a></span></footer>
</div>Tokenlar: --fx-bg-page --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-dialog-width --fx-ease-emphasized --fx-ease-enter --fx-ease-standard --fx-fg-error --fx-fg-warning --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-knob-motion --fx-knob-motion-lift --fx-motion-base --fx-motion-fast --fx-motion-lift --fx-motion-shift-lg --fx-motion-slower --fx-popover-width --fx-radius-overlay --fx-radius-surface --fx-shadow-sm --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-primary --fx-text-secondary --fx-text-tertiary