Timeline

Muestra eventos en orden cronológico con diseños alternados o verticales.

Importación

import { Timeline } from 'asterui'

Ejemplos

Línea de Tiempo Básica

Línea de tiempo simple con contenido alternado.

1984
First Macintosh computer
iMac
1998

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline>
        <Timeline.Item start="1984" icon={<CheckCircleIcon />} end="First Macintosh computer" endBox />
        <Timeline.Item start="iMac" icon={<CheckCircleIcon />} end="1998" startBox />
      </Timeline>
    )
}

export default App

Línea de Tiempo Vertical

Apila elementos verticalmente.

Apple Watch
2015
2015
2017
iPhone X
Apple Silicon M1
2020
2020

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical>
        <Timeline.Item start="2015" icon={<CheckCircleIcon className="text-primary" />} end="Apple Watch" endBox />
        <Timeline.Item start="2017" icon={<CheckCircleIcon className="text-primary" />} end="iPhone X" endBox />
        <Timeline.Item start="2020" icon={<CheckCircleIcon className="text-primary" />} end="Apple Silicon M1" endBox />
      </Timeline>
    )
}

export default App

Línea de Tiempo Horizontal

Muestra elementos horizontalmente.

Step 1
Planning
Step 2
Development
Step 3
Testing
Step 4
Launch

import { Timeline } from 'asterui'
import { CheckCircleIcon, ClockIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline horizontal>
        <Timeline.Item start="Step 1" icon={<CheckCircleIcon />} end="Planning" endBox />
        <Timeline.Item start="Step 2" icon={<CheckCircleIcon />} end="Development" endBox />
        <Timeline.Item start="Step 3" icon={<ClockIcon />} end="Testing" endBox />
        <Timeline.Item start="Step 4" icon={<ClockIcon />} end="Launch" endBox />
      </Timeline>
    )
}

export default App

Línea de Tiempo Compacta

Todo el contenido en un lado.

1984
First Macintosh computer
1998
iMac

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical compact>
        <Timeline.Item
          icon={<CheckCircleIcon />}
          end={
            <div>
              <time>1984</time>
              <div className="text-lg font-black">First Macintosh computer</div>
            </div>
          }
          endBox
        />
        <Timeline.Item
          icon={<CheckCircleIcon />}
          end={
            <div>
              <time>1998</time>
              <div className="text-lg font-black">iMac</div>
            </div>
          }
          endBox
        />
      </Timeline>
    )
}

export default App

Icono Ajustado

Ajusta los iconos al inicio en lugar del centro.

Project Started
2023
2023
2024
Beta Release
Public Launch
2025
2025

import { Timeline } from 'asterui'
import { CheckCircleIcon, ClockIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical snapIcon>
        <Timeline.Item start="2023" icon={<CheckCircleIcon />} end="Project Started" endBox />
        <Timeline.Item start="2024" icon={<CheckCircleIcon />} end="Beta Release" endBox />
        <Timeline.Item start="2025" icon={<ClockIcon />} end="Public Launch" endBox />
      </Timeline>
    )
}

export default App

Colores

Aplica diferentes colores a los elementos de la línea de tiempo.

Task 1
Completed
Completed
In Progress
Task 2
Task 3
Warning
Warning
Error
Task 4

import { Timeline } from 'asterui'
import { CheckCircleIcon, ClockIcon, ExclamationCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical>
        <Timeline.Item start="Completed" icon={<CheckCircleIcon />} end="Task 1" endBox color="success" />
        <Timeline.Item start="In Progress" icon={<ClockIcon />} end="Task 2" endBox color="info" />
        <Timeline.Item start="Warning" icon={<ExclamationCircleIcon />} end="Task 3" endBox color="warning" />
        <Timeline.Item start="Error" icon={<ExclamationCircleIcon />} end="Task 4" endBox color="error" />
      </Timeline>
    )
}

export default App

Modo: Inicio

Todos los elementos alineados al inicio.

2020
Event One
2021
Event Two
2022
Event Three

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical mode="start">
        <Timeline.Item start="2020" icon={<CheckCircleIcon />} end="Event One" endBox />
        <Timeline.Item start="2021" icon={<CheckCircleIcon />} end="Event Two" endBox />
        <Timeline.Item start="2022" icon={<CheckCircleIcon />} end="Event Three" endBox />
      </Timeline>
    )
}

export default App

Modo: Fin

Todos los elementos alineados al final.

Event One
2020
2020
Event Two
2021
2021
Event Three
2022
2022

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical mode="end">
        <Timeline.Item start="2020" icon={<CheckCircleIcon />} end="Event One" endBox />
        <Timeline.Item start="2021" icon={<CheckCircleIcon />} end="Event Two" endBox />
        <Timeline.Item start="2022" icon={<CheckCircleIcon />} end="Event Three" endBox />
      </Timeline>
    )
}

export default App

Estado Pendiente

Muestra una actividad en curso al final.

Meeting started
9:00 AM
9:00 AM
9:30 AM
Presentation complete
Q&A session
10:00 AM
10:00 AM
Loading
Recording in progress...

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical pending="Recording in progress...">
        <Timeline.Item start="9:00 AM" icon={<CheckCircleIcon />} end="Meeting started" endBox color="success" />
        <Timeline.Item start="9:30 AM" icon={<CheckCircleIcon />} end="Presentation complete" endBox color="success" />
        <Timeline.Item start="10:00 AM" icon={<CheckCircleIcon />} end="Q&A session" endBox color="success" />
      </Timeline>
    )
}

export default App

Estado de Carga

Muestra spinner de carga en elementos individuales.

Complete
Step 1
Step 1
Step 2
Loading
Processing...
Pending
Step 3
Step 3

import { Timeline } from 'asterui'
import { CheckCircleIcon, ClockIcon } from '@aster-ui/icons/solid'

function App() {
  return (
      <Timeline vertical>
        <Timeline.Item start="Step 1" icon={<CheckCircleIcon />} end="Complete" endBox color="success" />
        <Timeline.Item start="Step 2" loading end="Processing..." endBox />
        <Timeline.Item start="Step 3" icon={<ClockIcon />} end="Pending" endBox />
      </Timeline>
    )
}

export default App

Orden Inverso

Invierte el orden de los elementos de la línea de tiempo.

First Event
1st
1st
2nd
Second Event
Third Event
3rd
3rd

import { Timeline, Button } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'
import { useState } from 'react'

function App() {
  const [reversed, setReversed] = useState(false);
  
  return (
      <div className="space-y-4">
        <Button size="sm" onClick={() => setReversed(!reversed)}>
          {reversed ? 'Normal Order' : 'Reverse Order'}
        </Button>
        <Timeline vertical reverse={reversed}>
          <Timeline.Item start="1st" icon={<CheckCircleIcon />} end="First Event" endBox />
          <Timeline.Item start="2nd" icon={<CheckCircleIcon />} end="Second Event" endBox />
          <Timeline.Item start="3rd" icon={<CheckCircleIcon />} end="Third Event" endBox />
        </Timeline>
      </div>
    )
}

export default App

API Declarativa

Usa la prop items para líneas de tiempo basadas en datos.

Company Founded
2020
2020
2021
Series A Funding
Global Expansion
2022
2022
2023
IPO

import { Timeline } from 'asterui'
import { CheckCircleIcon } from '@aster-ui/icons/solid'

function App() {
  const items = [
    { key: '1', start: '2020', end: 'Company Founded', endBox: true, icon: <CheckCircleIcon />, color: 'primary' },
    { key: '2', start: '2021', end: 'Series A Funding', endBox: true, icon: <CheckCircleIcon />, color: 'success' },
    { key: '3', start: '2022', end: 'Global Expansion', endBox: true, icon: <CheckCircleIcon />, color: 'info' },
    { key: '4', start: '2023', end: 'IPO', endBox: true, icon: <CheckCircleIcon />, color: 'warning' },
  ];
  
  return (
      <Timeline vertical items={items} />
    )
}

export default App

API

`Timeline`

Propiedad	Descripción	Tipo	Predeterminado
`children`	Elementos de línea de tiempo (patrón compuesto)	`React.ReactNode`	`-`
`items`	Elementos de línea de tiempo (API declarativa)	`TimelineItemConfig[]`	`-`
`vertical`	Orientación de diseño vertical	`boolean`	`false`
`horizontal`	Diseño horizontal (predeterminado)	`boolean`	`false`
`compact`	Todos los elementos en un lado	`boolean`	`false`
`snapIcon`	Ajustar icono al inicio en lugar del centro	`boolean`	`false`
`mode`	Diseño de distribución de elementos	`'start' \| 'alternate' \| 'end'`	`'alternate'`
`reverse`	Invertir orden de elementos	`boolean`	`false`
`pending`	Mostrar indicador pendiente/cargando al final	`React.ReactNode`	`-`
`pendingIcon`	Icono personalizado para elemento pendiente	`React.ReactNode`	`-`
`data-testid`	ID de prueba para el componente	`string`	`'timeline'`
`aria-label`	Etiqueta accesible para la línea de tiempo	`string`	`-`
`className`	Clases CSS adicionales	`string`	`-`

`Timeline.Item`

Propiedad	Descripción	Tipo	Predeterminado
`start`	Contenido en posición inicial (izquierda/arriba)	`React.ReactNode`	`-`
`end`	Contenido en posición final (derecha/abajo)	`React.ReactNode`	`-`
`icon`	Icono o marcador central	`React.ReactNode`	`-`
`startBox`	Envolver contenido inicial en timeline-box	`boolean`	`false`
`endBox`	Envolver contenido final en timeline-box	`boolean`	`false`
`color`	Color del punto/conector de línea de tiempo	`'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	`-`
`loading`	Mostrar spinner de carga en lugar de icono	`boolean`	`false`
`data-testid`	ID de prueba para este elemento	`string`	`-`
`className`	Clases CSS adicionales	`string`	`-`

`TimelineItemConfig`

Propiedad	Descripción	Tipo	Predeterminado
`key`	Clave única para el elemento	`React.Key`	`-`
`start`	Contenido en posición inicial	`React.ReactNode`	`-`
`end`	Contenido en posición final	`React.ReactNode`	`-`
`icon`	Icono o marcador central	`React.ReactNode`	`-`
`startBox`	Envolver contenido inicial en timeline-box	`boolean`	`false`
`endBox`	Envolver contenido final en timeline-box	`boolean`	`false`
`color`	Color del punto/conector de línea de tiempo	`TimelineColor`	`-`
`loading`	Mostrar spinner de carga	`boolean`	`false`
`className`	Clases CSS adicionales	`string`	`-`

Accesibilidad

Usa estructura de lista semántica (role="list") para lectores de pantalla
Los elementos de línea de tiempo se anuncian en orden
Soporta aria-label para describir el propósito de la línea de tiempo
Los conectores son decorativos y están ocultos de la tecnología asistiva
Los estados de carga incluyen indicadores de spinner visuales