Holat va javob · molecule
Ulaniş / oflayn banneri
Internet uzilganini va qaytganini xotirjam bildiruvçi pastki tabletka (4.163, #74): «Internet yöq — özgarişlar qurilmada saqlanib turibdi» (+ «Qayta uriniş») va qaytganda qisqa «Internet qayta ulandi» (3 soniyadan keyin yaşirinadi). foxui.js navigator.onLine va online/offline hodisalarini kuzatadi — sahifaga bir marta qöyiladi. Teskari rangli (snackbar), belgi + söz bilan; data-position: pastda (standart), tepada yoki hujjat ichida (inline).
Internet yöq — özgarişlar qurilmada saqlanib turibdi
Internet qayta ulandi
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | offlineonline 3 soniyadan keyin yaşirinadi | offline |
data-position | topinline hujjat içida | bottom |
Anatomiya
- root
.fx-offlineşart - icon
.fx-offline__iconixtiyoriy - text
.fx-offline__textşart - action
.fx-offline__actionixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | «Qayta uriniş» — ulanişni qayta tekşiradi |
role="status" (aria-live=polite) — ekran öquvçi işni bölmasdan aytadi; matn banner köringandan keyin yoziladi, şuning uçun bir marta öqiladi. Holat belgisi rang + şakl (kesilgan Wi-Fi) + söz. Fokusni öğirlamaydi; «Qayta uriniş» — oddiy tugma.
Kod
AI uçun: qaçon işlatiladi
- Forma, CRM yoki PWA — foydalanuvçi internetsiz ham işlayotgan bölişi mumkin bölgan har qanday ilova.
- Oflayn navbat (saqlanmagan özgarişlar) borligini bildiriş.
npx foxui add offline
<div class="fx-offline" data-position="inline" data-state="offline" role="status"> <span class="fx-offline__icon" data-for="offline" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 8.8a15 15 0 0 1 4.2-2.6M9.5 5.2A15 15 0 0 1 22 8.8M5 12.5a10 10 0 0 1 3.5-2M15 10.6a10 10 0 0 1 4 1.9M8.5 16a5 5 0 0 1 7 0M12 20h.01M3 3l18 18"/></svg></span> <span class="fx-offline__icon" data-for="online" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 8.8a15 15 0 0 1 20 0M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0M12 20h.01"/></svg></span> <p class="fx-offline__text">Internet yöq — özgarişlar qurilmada saqlanib turibdi</p> <button class="fx-btn fx-offline__action" data-size="sm" type="button" data-offline="retry">Qayta uriniş</button> </div> <div class="fx-offline" data-position="inline" data-state="online" role="status" style="margin-block-start:var(--fx-space-3)"> <span class="fx-offline__icon" data-for="online" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 8.8a15 15 0 0 1 20 0M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0M12 20h.01"/></svg></span> <p class="fx-offline__text">Internet qayta ulandi</p> </div> <!-- Sahifada (bir marta, body oxirida): --> <div class="fx-offline" data-fx-offline hidden> <span class="fx-offline__icon" data-for="offline" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 8.8a15 15 0 0 1 4.2-2.6M9.5 5.2A15 15 0 0 1 22 8.8M5 12.5a10 10 0 0 1 3.5-2M15 10.6a10 10 0 0 1 4 1.9M8.5 16a5 5 0 0 1 7 0M12 20h.01M3 3l18 18"/></svg></span> <span class="fx-offline__icon" data-for="online" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 8.8a15 15 0 0 1 20 0M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0M12 20h.01"/></svg></span> <p class="fx-offline__text"></p> <button class="fx-btn fx-offline__action" data-size="sm" type="button" data-offline="retry">Qayta uriniş</button> </div>
Tokenlar: --fx-bg-surface --fx-border-width-default --fx-color-pastel-green --fx-color-pastel-yellow --fx-ease-enter --fx-font-size-sm --fx-motion-base --fx-motion-shift-md --fx-radius-overlay --fx-shadow-lg --fx-size-icon-md --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-8 --fx-text-primary