'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Datos
Timeline
Eventos en orden: un registro de cambios, el avance de un pedido, un feed de actividad.
import { Timeline } from '@alea/ui';
Ejemplos
Timeline
Tonos, horas y un último paso pendiente.
Moved to static hosting
Two new games
Kern Me and Tab OrderThirteen Figma plugins
Lemon Squeezy approval
En curso
Una última entrada pendiente para lo que todavía está pasando.
- 09:02
Build passed
- 09:05
252 browser checks passed
- 09:06
Waiting for approval
Ana is reviewing Deploying to production…
Alternada, al final, activa y pequeña
mode="alternate" alterna lados desde 640 px (una columna en teléfonos); mode="end" pone el contenido a la izquierda; isActive hace latir el elemento actual; reverse invierte el orden; size="sm" para paneles laterales.
- Oct 1
Order placed
- Oct 2
Packed
Two boxes - Today
Out for delivery
- Tomorrow
Delivered
- Oct 1
Order placed
- Oct 2
Packed
Two boxes - Today
Out for delivery
- Tomorrow
Delivered
- Tomorrow
Delivered
- Today
Out for delivery
- Oct 2
Packed
Two boxes - Oct 1
Order placed
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Mode
mode - Reverse
reverse - Size
size
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-bg…--alea-border-control…--alea-border-strong…--alea-status-danger…--alea-status-success…--alea-status-warning…--alea-text-faint…--alea-text-muted…
Space
--alea-space-3…--alea-space-4…--alea-space-6…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-regular…--alea-font-weight-semibold…
Motion
--alea-motion-ease-out…
Props
Timeline props
Eventos en orden: un registro de cambios, el avance de un pedido, un feed de actividad. Contenido de un lado, del otro, o alternado; invertido; dos tamaños.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
itemsobligatoria | TimelineItem[] | - | Las entradas: id, title, y opcionalmente time, dateTime, description, tone, icon. |
className | string | - | Clases extra para el elemento raíz. |
mode | "start" | "end" | "alternate" | 'start' | start (contenido a la derecha de la línea, por defecto), alternate (los lados se alternan, las horas del otro lado desde 640 px) o end. |
pending | ReactNode | - | Lo más nuevo o lo más viejo primero lo decides tú; esto solo marca el último elemento como pendiente. |
reverse | boolean | - | Muestra los elementos en orden inverso. |
size | "sm" | "md" | - | sm (más compacto, para paneles laterales) o md (por defecto). |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
modestartendalternatesizesmmd- Estados
- PendingPressed (CSS)
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-timeline.alea-tl-item.alea-tl-dot.alea-tl-body.alea-tl-time.alea-tl-title.alea-tl-desc.alea-tl-pending- Atributos data
data-tone=accentdata-tone=successdata-tone=warningdata-tone=dangerdata-size=smdata-mode=enddata-mode=alternate
Accesibilidad
- Una lista ordenada; pasa dateTime para que las horas sean legibles por máquinas.
Qué hacer y qué evitar
Hacer
- Pon lo más nuevo primero para actividad, lo más viejo primero para historial.
- Usa tone solo con significado: success, warning, danger.
Evitar
- No lo uses para pasos que la persona todavía tiene que hacer: usa Steps.
- No muestres más de unos diez eventos sin un Ver más.