Timeline

Exiba eventos em ordem cronológica com layouts alternados ou verticais.

Importação

import { Timeline } from 'asterui'

Exemplos

Linha do Tempo Básica

Linha do tempo simples com conteúdo 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

Linha do Tempo Vertical

Empilhe itens 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

Linha do Tempo Horizontal

Exiba itens 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

Linha do Tempo Compacta

Todo o conteúdo em um 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

Ícone Ajustado

Ajuste ícones ao início em vez do 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

Cores

Aplique diferentes cores aos itens da linha do tempo.

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: Início

Todos os itens alinhados ao início.

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: Fim

Todos os itens alinhados ao fim.

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 Pendente

Mostre uma atividade em andamento no 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 Carregamento

Mostre spinner de carregamento em itens individuais.

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

Ordem Reversa

Inverta a ordem dos itens da linha do tempo.

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

Use a prop items para linhas do tempo baseadas em dados.

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`

Propriedade	Descrição	Tipo	Padrão
`children`	Itens da linha do tempo (padrão composto)	`React.ReactNode`	`-`
`items`	Itens da linha do tempo (API declarativa)	`TimelineItemConfig[]`	`-`
`vertical`	Orientação de layout vertical	`boolean`	`false`
`horizontal`	Layout horizontal (padrão)	`boolean`	`false`
`compact`	Todos os itens em um lado	`boolean`	`false`
`snapIcon`	Ajustar ícone ao início em vez do centro	`boolean`	`false`
`mode`	Layout de distribuição de itens	`'start' \| 'alternate' \| 'end'`	`'alternate'`
`reverse`	Inverter ordem dos itens	`boolean`	`false`
`pending`	Mostrar indicador pendente/carregando no final	`React.ReactNode`	`-`
`pendingIcon`	Ícone personalizado para item pendente	`React.ReactNode`	`-`
`data-testid`	ID de teste para o componente	`string`	`'timeline'`
`aria-label`	Label acessível para a linha do tempo	`string`	`-`
`className`	Classes CSS adicionais	`string`	`-`

`Timeline.Item`

Propriedade	Descrição	Tipo	Padrão
`start`	Conteúdo na posição inicial (esquerda/topo)	`React.ReactNode`	`-`
`end`	Conteúdo na posição final (direita/baixo)	`React.ReactNode`	`-`
`icon`	Ícone ou marcador central	`React.ReactNode`	`-`
`startBox`	Envolver conteúdo inicial em timeline-box	`boolean`	`false`
`endBox`	Envolver conteúdo final em timeline-box	`boolean`	`false`
`color`	Cor do ponto/conector da linha do tempo	`'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	`-`
`loading`	Mostrar spinner de carregamento em vez de ícone	`boolean`	`false`
`data-testid`	ID de teste para este item	`string`	`-`
`className`	Classes CSS adicionais	`string`	`-`

Acessibilidade

Usa estrutura de lista semântica (role="list") para leitores de tela
Itens da linha do tempo são anunciados em ordem
Suporta aria-label para descrever o propósito da linha do tempo
Conectores são decorativos e ocultos da tecnologia assistiva
Estados de carregamento incluem indicadores de spinner visuais