Cronologia

Uma cronologia é uma lista ordenada com um traço ao lado. Constrói-a a partir de items, ou de filhos timelineItem() quando as entradas não forem suficientemente uniformes para virem de um array.

Cronologia básica

Março de 2026
Biblioteca de componentes
O sitelo-ui chega com noventa componentes.
Janeiro de 2026
Ilhas de servidor
Páginas estáticas com zonas renderizadas no momento do pedido.
Outubro de 2025
Primeira versão
Rotas por ficheiros e um comando de construção.

timeline({
  items: [
    { time: 'Março de 2026', title: 'Biblioteca de componentes', description: 'O sitelo-ui chega com noventa componentes.' },
    { time: 'Janeiro de 2026', title: 'Ilhas de servidor', description: 'Páginas estáticas com zonas renderizadas no momento do pedido.' },
    { time: 'Outubro de 2025', title: 'Primeira versão', description: 'Rotas por ficheiros e um comando de construção.' },
  ],
})

Marcadores coloridos

12:04
Publicação bem-sucedida
204 páginas publicadas.
12:03
Lighthouse passou
Todos os limiares cumpridos.
12:01
Aviso na verificação de ligações
Uma ligação externa esgotou o tempo.
12:00
Construção iniciada

timeline({
  items: [
    { time: '12:04', title: 'Publicação bem-sucedida', description: '204 páginas publicadas.', color: 'success' },
    { time: '12:03', title: 'Lighthouse passou', description: 'Todos os limiares cumpridos.', color: 'success' },
    { time: '12:01', title: 'Aviso na verificação de ligações', description: 'Uma ligação externa esgotou o tempo.', color: 'warning' },
    { time: '12:00', title: 'Construção iniciada', color: 'neutral' },
  ],
})

Com ícones

Agora mesmo
Publicado
Há 2 minutos
A construir

timeline(
  timelineItem({
    time: 'Agora mesmo',
    title: 'Publicado',
    color: 'success',
    icon: icon('check', { 'stroke-width': 3.4 }),
  }),
  timelineItem({
    time: 'Há 2 minutos',
    title: 'A construir',
    color: 'primary',
  }),
)

Entradas ricas

Os filhos de um item vão por baixo da sua descrição.

v2.7.0
Secções de página
herofooterstatstepstimelinemockup
v2.6.3
Manutenção
Subida de dependências e uma correção no verificador de ligações.

timeline(
  timelineItem({ time: 'v2.7.0', title: 'Secções de página', color: 'primary' },
    stack({ direction: 'row', gap: 'xs', wrap: true, style: 'margin-top: 0.5rem' },
      chip({ size: 'sm' }, 'hero'),
      chip({ size: 'sm' }, 'footer'),
      chip({ size: 'sm' }, 'stat'),
      chip({ size: 'sm' }, 'steps'),
      chip({ size: 'sm' }, 'timeline'),
      chip({ size: 'sm' }, 'mockup'),
    ),
  ),
  timelineItem({ time: 'v2.6.3', title: 'Manutenção', description: 'Subida de dependências e uma correção no verificador de ligações.' }),
)

A partir de dados

A forma habitual num site estático: um ficheiro de registo de alterações carregado pelo data() e mapeado diretamente para itens.

2026-03-01
v2.7.0
Secções de página
2026-02-14
v2.6.3
Manutenção
2026-01-20
v2.6.0
Ilhas de servidor

return (() => {
  const releases = [
    { version: '2.7.0', date: '2026-03-01', summary: 'Secções de página' },
    { version: '2.6.3', date: '2026-02-14', summary: 'Manutenção' },
    { version: '2.6.0', date: '2026-01-20', summary: 'Ilhas de servidor' },
  ]

  return timeline({
    items: releases.map((release) => ({
      time: release.date,
      title: 'v' + release.version,
      description: release.summary,
      color: 'primary',
    })),
  })
})()

Cronologia ou passos?

Uma cronologia regista o que aconteceu, do mais recente ou do mais antigo, e não tem posição atual. O steps() mostra o progresso ao longo de um percurso, com um passo em curso e os restantes à frente ou atrás dele.

Props

timeline():

Prop	Tipo	Predefinição	Descrição
`items`	`Array`	`[]`	Objetos com as props de timelineItem abaixo.

timelineItem():

Prop	Tipo	Predefinição	Descrição
`time`	`Child`	—	Quando aconteceu — uma data, uma versão, uma hora.
`title`	`Child`	—	O que aconteceu.
`description`	`Child`	—	O detalhe por baixo.
`icon`	`Child`	—	Marcação dentro do marcador.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Cor do marcador.

Os filhos de um item são desenhados sob a sua descrição.