Línea de tiempo

Flujo de eventos vertical. Lista semántica <ol>, donde el orden temporal equivale al orden del documento.

Uso básico

Uso básico

1. 2026-09-01

   Revisión de inicio
2. 2026-09-15

   Entrega de la fase uno
3. 2026-09-25

   Aceptación en curso

<script setup lang="ts">
</script>

<template>
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">Revisión de inicio</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">Entrega de la fase uno</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">Aceptación en curso</LhTimelineItem>
  </LhTimeline>
</template>

<script>
export default {}
</script>

<template>
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">Revisión de inicio</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">Entrega de la fase uno</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">Aceptación en curso</LhTimelineItem>
  </LhTimeline>
</template>

Distribución alternada

Alternada

1. Q1

   Planificación
2. Q2

   Desarrollo
3. Q3

   Pruebas de carga

hollow hace que el nodo se muestre como un círculo hueco, utilizado habitualmente para estados no completados.

Nodos huecos

1. Q1

   No iniciado
2. Q2

   En curso
3. Q3

   Completado

<script setup lang="ts">
</script>

<template>
  <!-- Distribución alternada -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">Planificación</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">Desarrollo</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">Pruebas de carga</LhTimelineItem>
  </LhTimeline>
  <!-- Nodos huecos -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>No iniciado</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">En curso</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">Completado</LhTimelineItem>
  </LhTimeline>
</template>

<script>
export default {}
</script>

<template>
  <!-- Distribución alternada -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">Planificación</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">Desarrollo</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">Pruebas de carga</LhTimelineItem>
  </LhTimeline>
  <!-- Nodos huecos -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>No iniciado</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">En curso</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">Completado</LhTimelineItem>
  </LhTimeline>
</template>

API

LhTimeline Props

Prop	Descripción	Tipo	Predeterminado
mode	Modo de diseño	"left" | "alternate"	'left'
sx	Propiedades de diseño rápido sx	LhSxProps	—

LhTimelineItem Props

Prop	Descripción	Tipo	Predeterminado
timestamp	Marca de tiempo	string	—
type	Tipo semántico del nodo	'primary' | 'success' | 'warning' | 'danger'	—
hollow	Nodo hueco	boolean	false
sx	Propiedades de diseño rápido sx	LhSxProps	—

Slots: default (contenido), timestamp (marca de tiempo), dot (punto personalizado).

Accesibilidad

• Lista semántica <ol>, donde el orden temporal equivale al orden del documento, de modo que los lectores de pantalla lo anuncian en secuencia
• El punto del nodo es puramente decorativo (aria-hidden="true"); el slot de punto personalizado tampoco entra en el árbol de accesibilidad

Definiciones de tipos

Este componente exporta las siguientes estructuras de tipos TypeScript (extraídas automáticamente de los fuentes packages/components/timeline/src/types.ts y @lh-ui/share/core/*; abre cada entrada para ver la definición completa; consulta la tabla de Props de arriba para la descripción de los atributos):

LhTimelineItemProps

/** Props del elemento (componente Item) */
export interface LhTimelineItemProps {
  timestamp?: string
  type?: 'primary' | 'success' | 'warning' | 'danger'
  hollow?: boolean
  /** Propiedades de diseño rápido sx */
  sx?: LhSxProps
}

LhTimelineProps

/** Props de la línea de tiempo */
export interface LhTimelineProps {
  /** Modo de diseño (alternate: distribución alternada) */
  mode?: LhTimelineMode
  /** Propiedades de diseño rápido sx */
  sx?: LhSxProps
}

LhTimelineMode _{(de @lh-ui/share/core/timeline)}

/** Modo de diseño de la línea de tiempo */
export type LhTimelineMode = 'left' | 'alternate'