Timeline
Lista cronológica de eventos con 5 variantes semánticas, timestamps y línea conectora animada.
TypeScript
import { NeuTimelineComponent } from '@neural-ui/core/timeline';Actividad reciente
- 1. Pedido confirmado · Hace 2 min
Tu pedido #NU-2024-001 ha sido registrado correctamente.
- 2. Pago procesado · Hace 5 min
Pago de 89,99 € procesado mediante tarjeta •••• 4242.
- 3. Stock bajo · Hace 1h
El artículo "Angular Pro Kit" solo tiene 3 unidades.
- 4. Envío fallido · Ayer
No se pudo entregar el paquete. Reintento mañana.
- 5. Nuevo usuario registrado · 12 Mar
juan@ejemplo.com se unió a la plataforma.
Historial de versiones
- v3.0.0 — API de SignalsMar 2025
Reescritura completa con signals y zoneless.
- v2.5.0 — Nuevos componentesEne 2025
Accordion, Timeline, Stepper y Toolbar
- v2.0.0 — Tokens de diseñoOct 2024
Sistema de tokens CSS para theming avanzado.
- v1.0.0 — Primera versiónJun 2024
Lanzamiento inicial con 8 componentes.
TypeScript
import { NeuTimelineComponent, NeuTimelineItem } from '@neural-ui/core/timeline';
@Component({
imports: [NeuTimelineComponent],
template: `<neu-timeline [items]="events" />`
})
export class MyComponent {
events: NeuTimelineItem[] = [
{ title: 'Order confirmed', description: '...', time: '2 min ago', variant: 'success' },
{ title: 'Payment processed', description: '...', time: '5 min ago', variant: 'info' },
{ title: 'Shipment failed', description: '...', time: 'Yesterday', variant: 'danger' },
];
}