Körsatiş · molecule
«Hozir» paneli
Jonli holat plitkalari (2–4 ta): ikon + katta qiymat (soat, quyoş, harorat, kurs, bayram) + izoh + manba. Soat — data-fx-clock: har soniya yangilanadi, vaqt mintaqasi data-tz (IANA), JS'siz — server vaqti; qolgani serverdan. Manba eskirgan bölsa (data-stale) — manba qatori ogohlantiriş rangida, sana bilan. Tor joyda 2×2, toq oxirgisi butun qator. Manbaa'dan (⑤, Fox MB topşirdi, 20.10).
Toşkentdan 3 soat orqada · UTC+2
08:17 — 18:55Quyoş (Parij) · kun 10 soat 38 daqiqa
+16 °CParijda · şamol 3,5 m/s · namlik 56 %MET Norway · 8 kun oldin
1-noyabrBarça avliyolar kuniKeyin: 11-noyabr — Yaraş kuni
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-stale | true | — |
Anatomiya
- root
.fx-nowşart - tile
.fx-now__tileşart - icon
.fx-now__iconixtiyoriy - body
.fx-now__bodyşart - value
.fx-now__valueşart - label
.fx-now__labelixtiyoriy - source
.fx-now__sourceixtiyoriy
Holatlar
stale
Klaviatura va kiriş
Qiymat va izoh — oddiy matn; soat har soniya yangilanadi, lekin ekran öquvçiga aytilmaydi (aria-live yöq). Ikon — bezak.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Şahar, mamlakat yoki ofis sahifasi sarlavhasi ostida: mahalliy vaqt, quyoş, ob-havo, kurs, yaqin bayram.
- Dashboard'da tizim holati (jonli soat, oxirgi sinxron).
npx foxui add now
<div class="fx-now" style="inline-size:100%"> <div class="fx-now__tile"><span class="fx-now__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z"/></svg></span><span class="fx-now__body"><time class="fx-now__value" data-fx-clock data-tz="Europe/Paris">22:39:59</time><span class="fx-now__label">Toşkentdan 3 soat orqada · UTC+2</span></span></div> <div class="fx-now__tile"><span class="fx-now__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/></svg></span><span class="fx-now__body"><b class="fx-now__value">08:17 — 18:55</b><span class="fx-now__label">Quyoş (Parij) · kun 10 soat 38 daqiqa</span></span></div> <div class="fx-now__tile" data-stale><span class="fx-now__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z"/></svg></span><span class="fx-now__body"><b class="fx-now__value">+16 °C</b><span class="fx-now__label">Parijda · şamol 3,5 m/s · namlik 56 %</span><span class="fx-now__source">MET Norway · 8 kun oldin</span></span></div> <div class="fx-now__tile"><span class="fx-now__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"/></svg></span><span class="fx-now__body"><b class="fx-now__value">1-noyabr</b><span class="fx-now__label">Barça avliyolar kuni</span><span class="fx-now__source">Keyin: 11-noyabr — Yaraş kuni</span></span></div> </div>
Tokenlar: --fx-bg-subtle --fx-bg-surface --fx-border-color-surface --fx-border-width-default --fx-fg-warning --fx-font-adjust-numeric --fx-font-family-numeric --fx-font-size-lg --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-semibold --fx-radius-surface --fx-size-icon-md --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan
Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.