flows.md · documentação · Blocos

:::timeline#

Uma sequência de passos ligados por uma linha: o rastreio de um pedido, um passo a passo, um histórico, um começo guiado. Cada item, separado por ---, é um passo.

Ao vivo#

:::timeline
**Pedido feito** `state:done`

10 mar 2027 · pelo site
---
**Em produção** `state:current`

Torneando e esmaltando
---
**Enviado** `state:upcoming`

Previsão: 24 mar
:::

A primeira linha é o título; as outras, os detalhes. , current, upcoming, error ou skipped dão o marcador e dizem em palavras onde o passo está.

Na horizontal, numerado#

direction:horizontal corre de lado, como um passo a passo, e fica vertical numa tela estreita.

:::timeline direction:horizontal marker:number
**Conta** `state:done`
---
**Espaço** `state:done`
---
**Primeira página** `state:current`
---
**Publicar** `state:upcoming`
:::

De uma coleção#

Um @data com view:timeline desenha as linhas de uma coleção como os passos de uma linha do tempo, e ela muda quando as linhas mudam.

Argumentos#

• direction — vertical (o padrão) ou horizontal.
• marker — dot (o padrão), number ou icon.
• line — solid, dashed ou none.
• density — normal ou compact, para um histórico longo.

Um item que é só um título agrupa os passos de baixo (Hoje, Ontem); uma :::timeline dentro de um item são os subpassos dele.