Gebaut auf Vercels UI SDK 0.1.0-beta.2. Die API kann sich ändern.
Timeline
Eine Timeline auf Vercels UI SDK für Aktivität, Bestellfortschritt und Agentenschritte, vertikal oder horizontal, mit Status, Zeitstempeln, Symbol-Markern und Feed-Modus.
- Komponenten zur Datenanzeige
- 7 Teilen
- 8 Beispielen
@ui-sdk/core@ui-sdk/reactclass-variance-authority
pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-timeline.jsonFügt die Komponente, die HextaUI-Theme-Tokens und alle HextaUI-Komponenten hinzu, von denen sie abhängt.
Füge die Theme-Tokens zu deinem globalen CSS hinzu, falls du das noch nicht getan hast.
Installiere die Abhängigkeiten.
pnpm add @ui-sdk/react@0.1.0-beta.2 @ui-sdk/core@0.1.0-beta.2 class-variance-authority cnKopiere den folgenden Code und füge ihn in dein Projekt ein.
components/ui/ui-sdk-timeline.tsx Passe die Importpfade an dein Projekt-Setup an.
UI SDK bringt etwas eigenes CSS in einem Cascade Layer namens ui-sdk mit. Deklariere diesen Layer ganz oben im globalen Stylesheet, über dem Tailwind-Import, damit deine Klassen gewinnen.
Eine Timeline listet auf, was passiert ist oder passieren wird, etwa einen Aktivitätsverlauf, den Fortschritt einer Bestellung oder die Schritte eines Agenten. Für Screenreader ist sie eine Liste mit einem Tab-Stopp, und die Pfeiltasten wechseln zwischen Ereignissen. Übergib dateTime an TimelineTime, damit das Datum maschinenlesbar ist, während der Text freundlich bleibt. UI SDK markiert sie in 0.1.0-beta.2 als experimentell.
Jeder Teil in einem Element ist optional. Der Marker sitzt in einer eigenen Spalte, und der Verbinder läuft von ihm zum nächsten Ereignis, nach dem letzten ausgeblendet. Alles andere in einem Element, etwa ein Button oder ein Collapsible, richtet sich am Titel aus.
Gib jedem Element einen status von complete, current oder upcoming. Das aktuelle Ereignis erhält aria-current="step" und den Tab-Stopp, und ein Controller fokussiert ein Ereignis über seinen value. Nenne den Status auch im Titel, da der Marker ihn nur zeigt.
Ein Symbol in TimelineMarker macht ihn zu einem kleinen Kreis. Setze einen Spinner in den aktuellen Schritt, während ein Agent arbeitet, und eine Dauer wie PT5S in dateTime.
Die variant des Markers ist success, warning, destructive oder info, für einen leeren Punkt oder ein Symbol.
orientation="horizontal" legt die Ereignisse in eine Reihe, wie eine Roadmap. Links und Rechts wechseln zwischen ihnen, und loop={false} hält an den Enden.
Links und Buttons in einem Ereignis bleiben in der Tab-Reihenfolge. Tab springt vom Ereignis zu ihnen, und die Pfeiltasten wechseln weiter zwischen Ereignissen.
feed macht die Liste zu einem Feed von Artikeln für wachsende Timelines, und Bild ab und Bild auf wechseln zwischen ihnen. Setze busy, während mehr lädt.
Marker und Linie wandern auf die rechte Seite.
| Taste | Aktion |
|---|---|
| ↓↑ | Wechseln zwischen Ereignissen in einer vertikalen Timeline. |
| →← | Wechseln zwischen Ereignissen in einer horizontalen Timeline. In Rechts-nach-links-Text tauschen sie. |
| HomeEnd | Fokussieren das erste oder letzte Ereignis. |
| PageDownPageUp | In einem Feed fokussieren sie den nächsten oder vorherigen Artikel, von überall innerhalb eines Artikels. |
| Tab | Springt auf das aktuelle Ereignis, sonst auf das erste, dann zu den Links und Buttons darin. |
Eine Timeline ist eine mit aria-label benannte Liste oder ein Feed von Artikeln mit ihren Positionen. Jedes Ereignis wird nach seinem Titel benannt und durch Zeit und Beschreibung beschrieben, und Marker und Verbinder sind für Screenreader verborgen.
Das fokussierte Ereignis zeigt einen Ring mit Abstand. Marker-Farben blenden nur bei erlaubter Bewegung zwischen Status über, und in erzwungenen Farben zeichnen Punkte und Linien in der Textfarbe.
Jeder Teil umhüllt den gleichnamigen UI-SDK-Teil und nimmt alle seine Props an, auch render und einen className, der eine Funktion des Zustands sein kann.
| Prop | Typ | Standard |
|---|---|---|
orientation | "vertical" | "horizontal" | "vertical" |
loop | boolean | true |
feed | boolean | false |
busySetzt aria-busy an einem Feed, solange er lädt. | boolean | false |
controllerAus createTimelineController(). | TimelineController | – |
render | ReactElement | (props, state) => ReactElement | – |
| Attribut | Beschreibung |
|---|---|
data-slot="timeline" | Zum Ansprechen der Timeline in CSS. |
data-orientation | vertical oder horizontal. |
data-busy | Vorhanden, solange ein Feed beschäftigt ist. |
--timeline-count | Wie viele Ereignisse auf der Seite sind. |
| Prop | Typ | Standard |
|---|---|---|
valueBenennt das Ereignis für focus() des Controllers. | string | – |
status | "complete" | "current" | "upcoming" | – |
render | ReactElement | (props, state) => ReactElement | – |
| Attribut | Beschreibung |
|---|---|
data-slot="timeline-item" | Zum Ansprechen eines Ereignisses in CSS. |
data-complete | Vorhanden, wenn der Status des Ereignisses complete ist. |
data-current | Vorhanden, wenn der Status des Ereignisses current ist. |
data-upcoming | Vorhanden, wenn der Status des Ereignisses upcoming ist. |
data-first | Am ersten Ereignis vorhanden, sobald es auf der Seite ist. |
data-last | Am letzten Ereignis vorhanden, sobald es auf der Seite ist. |
--timeline-index | Die Position des Ereignisses ab 0. |
| Prop | Typ | Standard |
|---|---|---|
variant | "default" | "success" | "warning" | "destructive" | "info" | "default" |
childrenEin Symbol oder Bild. Leer zeichnet einen Punkt. | ReactNode | – |
render | ReactElement | (props, state) => ReactElement | – |
| Attribut | Beschreibung |
|---|---|
data-slot="timeline-marker" | Zum Ansprechen des Markers in CSS. |
data-variant | Die Variante des Markers. |
data-complete | Vorhanden, wenn der Status des Ereignisses complete ist. |
data-current | Vorhanden, wenn der Status des Ereignisses current ist. |
data-upcoming | Vorhanden, wenn der Status des Ereignisses upcoming ist. |
Die Linie vom Marker zum nächsten Ereignis. Unter einem abgeschlossenen Ereignis ist sie kräftig, nach dem letzten ausgeblendet.
Benennt sein Ereignis. Rendere es mit render={<h3 />} als Überschrift, damit man per Überschrift zwischen Ereignissen springen kann.
| Prop | Typ | Standard |
|---|---|---|
dateTimeEin maschinenlesbares Datum, eine Zeit oder Dauer. Es beschreibt das Ereignis. | string | – |
Mehr zu seinem Ereignis. Es beschreibt das Ereignis.
- AvatarNutzerfotos mit Initialen als Fallback, Statusbadges und gestapelte Gruppen, die zu einer Zahl einklappen.
- BadgeStatuslabels mit farbigen Punkten, entfernbare Tags, die zugleiten, und Zähler, die zu ihrem neuen Wert rollen.
- CardEine Fläche zum Gruppieren von Inhalten, mit drei Varianten, randlosen Medien, konzentrischen Radien und Links über die ganze Karte.
- ChartRecharts-Diagramme mit Theme-Farben, einem Tooltip und einer Legende, die Labels aus einer Konfiguration lesen, und Tastaturnavigation mit sichtbarem Fokusring.
- Data tableEine Tabelle für echte Daten, mit Sortierung, Suche, Zeilenauswahl, fixierten Spalten, Sticky Header und Paginierung.
- ItemEine Zeile aus Medien, Text und Aktionen für Listen, Einstellungen und Auswahlen, mit gruppierter Fläche und einer Hover-Hervorhebung, die zwischen den Zeilen gleitet.