TimelineGrid

Uso

Define columnas con ids estables, etiquetas y descripciones opcionales. Cada fila aporta sus actividades; start identifica una columna y span ocupa columnas consecutivas. La cuadrícula ajusta span a las columnas disponibles e ignora actividades cuyo start no existe. Usa tone, subtitle y meta para describirlas. minColumnWidth conserva columnas legibles y el calendario se desplaza localmente en pantallas estrechas.

Ejemplos

Prueba la interacción y abre Código para ver la implementación completa.

Prueba y configura

Cambia las opciones, prueba el resultado y consulta el template actualizado. Código contiene el ejemplo ejecutable completo.

<neu-timeline-grid
  [columns]="columns"
  [rows]="rows"
  density="normal"
  minColumnWidth="112px"
  [stickyLabels]="true"
  [selectedItemId]="selectedItemId()"
  [selectedSlot]="selectedSlot()"
  (itemClick)="chooseItem($event)"
  (slotClick)="chooseSlot($event)"
/>

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

export const columns = [
  {
    "id": "mon",
    "label": "Lunes"
  },
  {
    "id": "tue",
    "label": "Martes"
  },
  {
    "id": "wed",
    "label": "Miércoles"
  }
];

export const rows = [
  {
    "id": "design",
    "label": "Diseño",
    "description": "Equipo de producto",
    "items": [
      {
        "id": "research",
        "title": "Investigación",
        "start": "mon",
        "span": 2,
        "tone": "info",
        "subtitle": "Entrevistas"
      }
    ]
  },
  {
    "id": "engineering",
    "label": "Desarrollo",
    "items": [
      {
        "id": "review",
        "title": "Revisión",
        "start": "tue",
        "tone": "success"
      },
      {
        "id": "release",
        "title": "Entrega",
        "start": "wed",
        "tone": "warning"
      }
    ]
  }
];

export const selectedItemId = signal(null);

export const selectedSlot = signal(null);

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

const rows: readonly NeuTimelineGridRow[] = [
  {
    "id": "design",
    "label": "Diseño",
    "description": "Equipo de producto",
    "items": [
      {
        "id": "research",
        "title": "Investigación",
        "start": "mon",
        "span": 2,
        "tone": "info",
        "subtitle": "Entrevistas"
      }
    ]
  },
  {
    "id": "engineering",
    "label": "Desarrollo",
    "items": [
      {
        "id": "review",
        "title": "Revisión",
        "start": "tue",
        "tone": "success"
      },
      {
        "id": "release",
        "title": "Entrega",
        "start": "wed",
        "tone": "warning"
      }
    ]
  }
];

Datos y contenido

itemClick y slotClick comunican la activación; no aplican la selección automáticamente. Actualiza selectedItemId o selectedSlot para mostrar lo que acepta tu aplicación. Limpia el otro valor si la selección de actividad y franja debe ser excluyente. Este componente presenta datos; no implementa arrastre ni edición. No tiene Templates.

Accesibilidad y teclado

Las actividades y franjas son botones nativos nombrados a partir de su fila y contenido. Usa Tab para acceder e Intro o Espacio para activarlos. Las selecciones aplicadas exponen aria-pressed. El área desplazable recibe foco por teclado; stickyLabels mantiene visibles los nombres de fila.

API

Inputs y Outputs corresponden al paquete instalado. Los tipos con nombre enlazan a sus definiciones. Cada Template disponible tiene un ejemplo con Demo y Código.

Inputs

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

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

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 { NeuTimelineGridColumn } from '@neural-ui/core/timeline-grid';

// Declaración pública (solo referencia)
export interface NeuTimelineGridColumn {
  description?: string;
  id: string;
  label: string;
}

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

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

// Declaración pública (solo referencia)
export interface NeuTimelineGridItem {
  id: string;
  meta?: string;
  span?: number;
  start: string;
  subtitle?: string;
  title: string;
  tone?: NeuTimelineGridItemTone;
}

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

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

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

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

// Declaración pública (solo referencia)
export interface NeuTimelineGridRow {
  description?: string;
  id: string;
  items: readonly NeuTimelineGridItem[];
  label: string;
}

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

// Declaración pública (solo referencia)
export interface NeuTimelineGridSlotSelection {
  columnId: string;
  rowId: string;
}

Estilos y tokens

Personaliza los tokens públicos disponibles y comprueba ambos temas. Las ilustraciones y el estado de los ejemplos no son Inputs de Core.

Componentes relacionados

Utiliza los componentes relacionados para completar tu interfaz.

• Timeline
• Table