Körsatiş · primitive
Nisbiy vaqt
<time datetime> matni «5 daqiqa oldin», «keça», «3 soatdan keyin» körinişida özi yangilanib turadi; hoverda va fokusda töliq sana (title). Intl.RelativeTimeFormat('uz') işlatiladi, bölmasa öz zaxira matnimiz. data-format: relative, absolute, auto (7 kundan keyin sana). Vaqt zonalari kartasi (4.146): data-card — hover yoki fokusda kiçik karta: nisbiy vaqt, mahalliy (brauzer zonasi), UTC va data-zones="Europe/Moscow:Moskva, …" böyiça aniq sana-vaqt va UTC siljişi (UTC+5). Xalqaro mijozlar, server loglari, hamkor bilan uçraşuv vaqti uçun. <time> fokus oladi, karta role="tooltip" (aria-describedby), Esc yopadi.
Oxirgi kiriş:
Buyurtma yaratildi:
Tölov sanasi:
Tölov qabul qilindi:
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-format | relativeautoabsolute | relative |
data-tone | defaultmuted | default |
data-card | | — |
Anatomiya
- root
.fx-reltimeşart - card
.fx-reltime__cardixtiyoriy - relative
.fx-reltime__relixtiyoriy - zones
.fx-reltime__gridixtiyoriy - zone
.fx-reltime__zoneixtiyoriy - time
.fx-reltime__atixtiyoriy - offset
.fx-reltime__offixtiyoriy
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Vaqtga fokus — karta oçiladi |
| Esc | Kartani yopadi |
Semantik <time datetime>; töliq sana title'da (hover va siçqonçasiz — datetime). Matn har 30 soniyada yangilanadi, aria-live yöq (ekran öqigiç bezovta qilinmaydi).
Kod
AI uçun: qaçon işlatiladi
- Faollik, izoh, bildirişnoma vaqti («3 daqiqa oldin»).
- Jadvalda «oxirgi yangilaniş».
- Aniq sana muhim (şartnoma, muddat) →
dl - datetime atributini unutmang — maşina va xulq undan öqiydi.
- Muhim muddatni (tölov) faqat nisbiy yozmang — absolute yoki auto bering.
npx foxui add reltime
<p>Oxirgi kiriş: <time class="fx-reltime" data-fx-reltime datetime="2026-10-17T09:55:00+05:00">17 oktyabr, 09:55</time></p> <p>Buyurtma yaratildi: <time class="fx-reltime" data-fx-reltime data-format="auto" datetime="2026-09-02T14:20:00+05:00">2 sentabr, 14:20</time></p> <p>Tölov sanasi: <time class="fx-reltime" data-fx-reltime data-format="absolute" datetime="2026-10-25T10:00:00+05:00">25 oktyabr, 10:00</time></p> <!-- Vaqt zonalari kartasi (4.146): hover / fokusda aniq vaqt --> <p>Tölov qabul qilindi: <time class="fx-reltime" data-fx-reltime data-card data-zones="Europe/Moscow:Moskva, Europe/Istanbul:Istanbul, America/New_York:Nyu-York" datetime="2026-10-17T15:42:00+05:00">17 oktyabr, 15:42</time></p>
Tokenlar: --fx-bg-surface --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-ease-enter --fx-ease-exit --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-exit-fast --fx-motion-fast --fx-radius-badge --fx-radius-overlay --fx-shadow-lg --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-primary --fx-text-tertiary