Ma'lumot · molecule

Faoliyat lentasi

Vaqt böyiça hodisalar: vertikal çiziq, belgi (nuqta, ikon yoki avatar), kim/nima, vaqt, ilova (izoh, farq). Holatlar: bajarildi, kutilmoqda (halqa aylanadi), xato (romb).

beta0.22.0 dan.fx-timelineFaqat CSS

Bugun
Hozir: hisob-faktura tayyorlanmoqda
09:20
Tölov kutilmoqda
09:14
BO
Bobur izoh qoldirdi
keça, 17:40
Şartnomani yuboring.
Xato: ariza yuborilmadi
15.10, 11:02

Reja tuzildi
bugun 09:02
2-qadam: komponent yozildi
bugun 10:40
3-qadam: Ustoz tasdiği
Ustozni kutyapti · 1 soat
4-qadam: reliz

Variantlar

Atribut	Qiymatlar	Standart
`data-state`	`pending` `error` `done` `live` hozir bajarilmoqda — brend nuqta va tölqin `todo` kelajakdagi qadam — böş halqa `waiting` hozir kimnidir kutyapti — rangli fonda; data-tone: brand \| warning \| info	`default`
`data-density`	`compact`	`default`
`data-tone`	`brand` Ustoz yoki mijozni kutyapti `warning` boşqa agent yoki kompaniyani kutyapti `info`	`brand`

Anatomiya

root.fx-timelineşart
item.fx-timeline__itemşart
marker.fx-timeline__markerşart
content.fx-timeline__contentşart
title.fx-timeline__titleixtiyoriy
text.fx-timeline__textixtiyoriy
time.fx-timeline__timeixtiyoriy
extra.fx-timeline__extraixtiyoriy
group.fx-timeline__groupixtiyoriy

Holatlar

pendingerror

Klaviatura va kiriş

<ol> — tartib e'lon qilinadi; guruh sarlavhasi role=presentation li (yoki alohida sarlavha). Vaqt — <time datetime> bölişi tavsiya. Holat belgi şakli + sarlavha matni bilan.

Kod

AI uçun: qaçon işlatiladi

Işlating

Buyurtma tarixi, CRM faoliyati, relizlar xronologiyasi.

Işlatmang

Jarayon qadamlari (hozir qaysi qadam) → steps
Ustunli soliştiriş → table
Lentani jadval örnida işlatmang — ustun soliştiriş kerak bölsa table.
Holatni faqat rang bilan bermang — sarlavha matni ham aytsin («Xato: …»).

npx foxui add timeline

<ol class="fx-timeline">
  <li class="fx-timeline__group" role="presentation">Bugun</li>
  <li class="fx-timeline__item" data-state="live"><span class="fx-timeline__marker"></span><div class="fx-timeline__content"><p class="fx-timeline__title">Hozir: hisob-faktura tayyorlanmoqda</p><span class="fx-timeline__time">09:20</span></div></li>
  <li class="fx-timeline__item" data-state="pending"><span class="fx-timeline__marker"></span><div class="fx-timeline__content"><p class="fx-timeline__title">Tölov kutilmoqda</p><span class="fx-timeline__time">09:14</span></div></li>
  <li class="fx-timeline__item"><span class="fx-timeline__marker"><span class="fx-avatar" data-size="sm" data-color="blue" role="img" aria-label="Bobur">BO</span></span><div class="fx-timeline__content"><p class="fx-timeline__title">Bobur izoh qoldirdi</p><span class="fx-timeline__time">keça, 17:40</span><div class="fx-timeline__extra">Şartnomani yuboring.</div></div></li>
  <li class="fx-timeline__item" data-state="error"><span class="fx-timeline__marker"></span><div class="fx-timeline__content"><p class="fx-timeline__title">Xato: ariza yuborilmadi</p><span class="fx-timeline__time">15.10, 11:02</span></div></li>
</ol>
<!-- bosqichlar: bajarildi ✓ · hozir kutyapti (rangli) · kelajak (halqa) -->
<ol class="fx-timeline" style="inline-size:100%;max-inline-size:28rem">
  <li class="fx-timeline__item" data-state="done"><span class="fx-timeline__marker"></span><div class="fx-timeline__content"><p class="fx-timeline__title">Reja tuzildi</p><span class="fx-timeline__time">bugun 09:02</span></div></li>
  <li class="fx-timeline__item" data-state="done"><span class="fx-timeline__marker"></span><div class="fx-timeline__content"><p class="fx-timeline__title">2-qadam: komponent yozildi</p><span class="fx-timeline__time">bugun 10:40</span></div></li>
  <li class="fx-timeline__item" data-state="waiting" data-tone="brand"><span class="fx-timeline__marker"></span><div class="fx-timeline__content"><p class="fx-timeline__title">3-qadam: Ustoz tasdiği</p><p class="fx-timeline__text">Ustozni kutyapti · 1 soat</p></div></li>
  <li class="fx-timeline__item" data-state="todo"><span class="fx-timeline__marker"></span><div class="fx-timeline__content"><p class="fx-timeline__title">4-qadam: reliz</p></div></li>
</ol>

Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-static-light --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-duration-spin --fx-ease-standard --fx-fg-error --fx-fg-info --fx-fg-success --fx-fg-warning --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-font-weight-semibold --fx-radius-circle --fx-radius-control --fx-size-icon-lg --fx-size-icon-md --fx-size-icon-sm --fx-size-status-dot --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-5 --fx-text-brand --fx-text-error --fx-text-primary --fx-text-secondary --fx-text-tertiary

Şu toifadan

API kalitlariAPI kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.Audit jurnaliXavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».Ustunli röyxatHar satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar.Tarif va hisob-kitobTarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF).Doska (kanban)Holat ustunlari va kartalar.GrafikGrafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.

Faoliyat lentasi

Variantlar

Anatomiya

Holatlar

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik