Vox Mente
Navegação

Componentes

Timeline

beta

Eventos em ordem cronológica, com horário e detalhe. Para o que aconteceu, não para o que fazer.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/timeline

Playground

  1. Helena M. concluiu a Trilha 1

    7º ano B · leitura inferencial
<TimelineItem>
  <TimelineHeader>
    <TimelineTitle>Helena M. concluiu a Trilha 1</TimelineTitle>
    <TimelineTime>há 20 min</TimelineTime>
  </TimelineHeader>
  <TimelineDescription>7º ano B · leitura inferencial</TimelineDescription>
</TimelineItem>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
Timeline
  └─ TimelineItem
    └─ TimelineHeader
      └─ TimelineTitle
      └─ TimelineTime
    └─ TimelineDescription
  └─ TimelineItem
    └─ TimelineHeader
      └─ TimelineTitle
      └─ TimelineTime
    └─ TimelineDescription

Uso

Linha do tempo de eventos imutáveis. Nada aqui abre edição — a UI de um registro append-only não deve sugerir que ele pode ser alterado.

  1. Helena M. concluiu a Trilha 1

    7º ano B · leitura inferencial

  2. Sessão registrada para Caio R.

    8º ano A · atenção sustentada

Carimbo de tempo

`TimelineTime` recebe `dateTime` porque numa trilha de auditoria a hora exata é evidência. O texto visível pode ser relativo — o valor legível por máquina não se perde.

  1. Nota lançada para a Turma 8º ano A

Tons do marcador

O marcador aceita `tone` para diferenciar a natureza do evento na régua: `info`, `progress`, `content`, `warning`, `critical`, além do `default` neutro.

  1. Convite enviado ao professor

  2. Trilha 2 iniciada

  3. Sem sessão registrada há 12 dias

Sem descrição

`TimelineDescription` é opcional. Um evento pode se resumir a quem fez o quê e quando.

  1. Boletim gerado

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

TimelineItem

PropTipoPadrão
tone"progress" | "content" | "default" | "warning" | "critical" | "info" | null—

Também aceita as props de React, incluindo className e os atributos de DOM.

Timeline, TimelineDescription, TimelineHeader, TimelineTime, TimelineTitle não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css