Timeline
Timeline
Una sequenza verticale per roadmap, attività di progetto, rilasci e altri eventi ordinati. Usa variant="roadmap" quando ogni tappa deve avere una card più evidente e una colonna separata per il periodo.
import { Timeline } from "@pompeitech/vesuvius-ui";Roadmap
- Q1
Fondamenta
Token, accessibilità e primitive. - Q2
Composizioni
Organismi pronti per le dashboard. - Q3
Admin Kit
Un guscio completo per prodotti.
Attività
Progetto creato
Workspace inizializzato.Review richiesta
In attesa di feedback.Deploy programmato
API
Timeline
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
items | TimelineItem[] | Eventi ordinati da visualizzare. | |
variant | "default" | "roadmap" | "default" | Usa lo stile compatto per le attività o le card milestone con colonna del periodo. |
className | string | Classi aggiuntive per la lista radice. | |
aria-label | string | "Timeline" | Nome accessibile della lista ordinata. |
TimelineItem
| Prop | Tipo | Descrizione |
|---|---|---|
id | string | Chiave stabile dell'elemento. |
title | string | Etichetta principale dell'evento. |
description | ReactNode | Contenuto di supporto. |
date | ReactNode | Data, ora o periodo. Nella modalità roadmap appare nella colonna del periodo. |
meta | ReactNode | Metadati secondari opzionali. |
icon | ReactNode | Contenuto opzionale dentro il marker. |
status | "default" | "active" | "success" | "warning" | "destructive" | "muted" | Stato semantico del marker. |
onClick | () => void | Rende il contenuto dell'evento un button accessibile. |
Accessibilità
Il componente usa una lista ordinata, mantiene il connettore decorativo e comunica il nome della timeline tramite aria-label. Usa onClick solo quando un evento è azionabile; altrimenti lascia gli elementi informativi. Lo status è un'informazione visiva, quindi quando è importante riportalo anche nel titolo o nella descrizione.