Timeline
Uporządkowana historia zdarzeń z informacją, kto i kiedy, na przykład zmiany rekordu albo kroki wdrożenia. Każdy ton ma własną ikonę i słowo, nigdy sam kolor.
- Timeline
- TimelineItem
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: Timeline
Deployed to productionSucceeded
Ada Lovelace
Health check slowWarning
Monitor
Response time reached 1.8 s for two minutes.Build failedFailed
Grace Hopper
Type error in src/data/Table.tsx, line 42.Branch createdInfo
Alan Turing
Project started
Noc, podgląd: Timeline
Deployed to productionSucceeded
Ada Lovelace
Health check slowWarning
Monitor
Response time reached 1.8 s for two minutes.Build failedFailed
Grace Hopper
Type error in src/data/Table.tsx, line 42.Branch createdInfo
Alan Turing
Project started
Wysoki kontrast, podgląd: Timeline
Deployed to productionSucceeded
Ada Lovelace
Health check slowWarning
Monitor
Response time reached 1.8 s for two minutes.Build failedFailed
Grace Hopper
Type error in src/data/Table.tsx, line 42.Branch createdInfo
Alan Turing
Project started
UżycieLink do sekcji Użycie
import { Timeline, TimelineItem } from '@skribly/ui/data'<Timeline aria-label="Deploy history">
<TimelineItem title="Deployed" tone="ok" toneLabel="Succeeded"
time="5 min ago" dateTime="2026-11-08T14:05:00Z" actor="Ada Lovelace" />
</Timeline>Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.
DostępnośćLink do sekcji Dostępność
- Lista uporządkowana nazwana przez aria-label, więc czytniki ekranu mówią, ile jest zdarzeń.
- Czasy są elementami time z czytelnym dla maszyn dateTime.
- Ikony są ukryte; ton jest wypowiedziany swoim słowem.
- Linia łącząca jest ramką, więc pozostaje widoczna w trybie wymuszonych kolorów.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.