Timeline | Neural Native

Importación

component.ts

import { NeuTimelineComponent } from '@neural-ui/native/timeline';

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Hitos de publicación

Completa la revisión de dispositivos y reábrela para comparar sus estados.

Ver y copiar el ejemplo completo

release-milestones.component.ts

import { Component, signal, computed } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuTimelineComponent } from '@neural-ui/native/timeline';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuTimelineComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">De la idea al lanzamiento</text><text class="product-caption">Cada hito cuenta parte de la historia</text></view><view class="product-section">
    <view class="usage-section">
    <neu-timeline label="Estado actual del lanzamiento" [items]="currentMilestones()" completedLabel="Completado" pendingLabel="Pendiente" />
    <neu-button [label]="reviewed() ? 'Reabrir revisión en dispositivos' : 'Completar revisión en dispositivos'" size="sm" variant="outline" (pressed)="reviewed.set(!reviewed())" />
    </view>
    </view></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly milestones: readonly (NeuOption & { readonly date?: string; readonly done?: boolean })[] = [
    { id: 'design', label: 'Diseño aprobado', date: 'Lunes', done: true, description: 'La bienvenida está lista para implementar.' },
    { id: 'test', label: 'Revisión en dispositivos', date: 'Miércoles', done: false, description: 'Comprueba el candidato al lanzamiento.' },
    { id: 'release', label: 'Lanzamiento', date: 'Viernes', done: false },
  ];
  readonly reviewed = signal(false);
  readonly currentMilestones = computed(() => this.milestones.map(item => item.id === 'test' ? { ...item, done: this.reviewed() } : item));
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Timeline · android · native capture — **Android**Captura nativa

Timeline · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	'Timeline'	Input	Nombre legible del control, acción o grupo.
completedLabel	string	'Completed'	Input	Estado traducido que se añade al nombre accesible del hito cuando done es true. No cambia el título visible; una cadena vacía omite el anuncio del estado.
pendingLabel	string	'Pending'	Input	Estado traducido que se añade al nombre accesible del hito cuando done es false. Los hitos sin done omiten este estado; una cadena vacía también omite el anuncio.
items	readonly (NeuOption & { readonly date?: string; readonly done?: boolean; })[]	[]	Input	Hitos ordenados con IDs estables, etiquetas y date, description y done opcionales. Define done explícitamente para anunciar el estado completado o pendiente; omítelo en un hito sin estado de finalización.

Models

Este componente no declara models bidireccionales.

Outputs

Este componente no declara outputs públicos.

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

NeuOption

NeuOption.ts

import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
    readonly id: string;
    readonly label: string;
    readonly description?: string;
    readonly disabled?: boolean;
}

Campo	Tipo	Requisito	Significado
id	string	Obligatorio	Identificador estable y único para seguimiento y selección.
label	string	Obligatorio	Nombre legible del elemento.
description	string	Opcional	Texto de apoyo opcional; su presentación depende del control.
disabled	boolean	Opcional	Impide activar o seleccionar este elemento.

Estructura específica de items

Esta propiedad amplía un tipo compartido de forma inline; no es una exportación con nombre independiente. El siguiente alias de tu aplicación muestra la estructura admitida completa.

example-data.ts

import type { NeuOption } from '@neural-ui/native';

type ExampleItems = readonly (NeuOption & { readonly date?: string; readonly done?: boolean; })[];