Timeline

Uso

Proporciona items con ids estables, title y time, description, tone y un path SVG icon opcionales. align coloca el eje a la izquierda, derecha o alterno; reverse cambia el orden visual sin modificar el input. density cambia el espaciado. El Template de item sustituye el contenido completo y el de marker solo el contenido del marcador.

Ejemplos

Prueba el comportamiento y abre Código para consultar la implementación.

Prueba y configura

Cambia las opciones y prueba el resultado. El template generado sigue tu configuración; Código contiene la implementación ejecutable completa.

<neu-timeline
  [items]="items()"
  align="left"
  density="normal"
  [reverse]="false"
  ariaLabel="Historial del pedido"
/>

import { signal } from '@angular/core';

export const items = signal([
  {
    "id": "created",
    "title": "Pedido recibido",
    "time": "09:00",
    "description": "Hemos recibido tu pedido.",
    "tone": "info",
    "icon": undefined
  },
  {
    "id": "packed",
    "title": "Listo para entregar",
    "time": "10:30",
    "description": "Tu pedido está preparado.",
    "tone": "warning"
  },
  {
    "id": "delivered",
    "title": "Entregado",
    "time": "12:00",
    "description": "La entrega se ha completado.",
    "tone": "success",
    "icon": undefined
  }
]);

Datos y contenido

Timeline no tiene Outputs y no modifica ni ordena tu colección. reverse solo cambia el orden renderizado. index del Template es la posición visual desde cero tras reverse. icon es un path SVG, no una clave de un provider de iconos.

Accesibilidad y teclado

Timeline renderiza una lista ordenada con ariaLabel opcional. Incluye texto significativo en los eventos; el marcador no debe ser la única forma de identificar un estado. Los SVG decorativos se ocultan a tecnologías de asistencia. Las acciones dentro de un Template conservan su teclado nativo.

API

Inputs y Outputs corresponden al paquete fijado. Los tipos con nombre enlazan a sus definiciones; cada Template disponible tiene un ejemplo ejecutable.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

import { NeuTimelineItemDirective } from '@neural-ui/core/timeline';

// Declaración pública (solo referencia)
export declare class NeuTimelineItemDirective {
}

import type { NeuTimelineItemContext } from '@neural-ui/core/timeline';

import { NeuTimelineItemDirective } from '@neural-ui/core/timeline';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<NeuTimelineItemContext>;

import { NeuTimelineMarkerDirective } from '@neural-ui/core/timeline';

// Declaración pública (solo referencia)
export declare class NeuTimelineMarkerDirective {
}

import type { NeuTimelineMarkerContext } from '@neural-ui/core/timeline';

import { NeuTimelineMarkerDirective } from '@neural-ui/core/timeline';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<NeuTimelineMarkerContext>;

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuDensity } from '@neural-ui/core';

// Declaración pública (solo referencia)
type NeuDensity = 'compact' | 'normal' | 'relaxed';

import type { NeuTimelineAlign } from '@neural-ui/core/timeline';

// Declaración pública (solo referencia)
export type NeuTimelineAlign = 'left' | 'right' | 'alternate';

import type { NeuTimelineItemTone } from '@neural-ui/core/timeline';

import type { NeuTimelineItem } from '@neural-ui/core/timeline';

// Declaración pública (solo referencia)
export interface NeuTimelineItem {
  description?: string;
  icon?: string;
  id?: string | number;
  time?: string;
  title: string;
  tone?: NeuTimelineItemTone;
}

import type { NeuTimelineItem } from '@neural-ui/core/timeline';

import type { NeuTimelineItemContext } from '@neural-ui/core/timeline';

// Declaración pública (solo referencia)
export interface NeuTimelineItemContext {
  readonly $implicit: NeuTimelineItem;
  readonly index: number;
}

import type { NeuTimelineItemTone } from '@neural-ui/core/timeline';

// Declaración pública (solo referencia)
export type NeuTimelineItemTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';

import type { NeuTimelineItem } from '@neural-ui/core/timeline';

import type { NeuTimelineMarkerContext } from '@neural-ui/core/timeline';

// Declaración pública (solo referencia)
export interface NeuTimelineMarkerContext {
  readonly $implicit: NeuTimelineItem;
}

Estilos y tokens

Utiliza tokens públicos de espaciado, superficie, texto y foco. Comprueba el contenido proyectado y los controles en ambos temas y con anchos reducidos.

Componentes relacionados

Combina estos componentes para construir la interfaz del entorno.

• Table
• Tabs