Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Timeline

Linha do tempo que lista eventos na ordem em que aconteceram, como as etapas de uma entrega ou o histórico de um chamado. Cada evento tem título, detalhes e horário.

Padrão Lista ordenada HTMLComponente de servidorCódigo ↗
minimal · light · #3fa34d

  1. Pedido feito

    Pedido nº 48920, 3 itens, R$ 214,90.

  2. Pagamento aprovado

    Pix recebido.

tone

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no servidor.

import { Timeline, TimelineItem, TimelineTitle, TimelineDescription, TimelineTime } from "@camaleo/react";

Anatomia

Uma lista ordenada. Cada item é uma linha com o indicador, o texto e o horário; a linha entre os indicadores é desenhada pelo CSS. Cada parte tem um data-slot que você pode usar no CSS.

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o skin, o modo e a marca escolhidos na barra acima.

minimal · light · #3fa34d

  1. Pedido feito

    Pedido nº 48920, 3 itens, R$ 214,90.

  2. Pagamento aprovado

    Pix recebido.

  3. Entregue

    Recebido pela portaria.

  1. Deploy iniciado

    Versão 2.8.0, por Ana Ribeiro.

  2. Testes aprovados

    1.284 testes em 6 min 12 s.

  3. Migração lenta

    A tabela de pedidos levou 4 min, o limite é 2.

  4. Health check falhou

    3 de 8 pods responderam 503.

  5. Rollback para a 2.7.4

    O tráfego voltou para a versão anterior.

Tons

Use tone para destacar problemas num histórico longo. A cor é só visual, então o título ainda precisa dizer o que aconteceu.

  1. Enviado

    Entregue aos Correios, código QB 123 456 789 BR.

  2. Saiu para entrega

    O carteiro saiu do centro de distribuição de Campinas.

  3. Entregue

    Recebido pela portaria.

Ícones

Um ícone por tipo de evento ajuda a pessoa a passar o olho numa lista longa. Passe em icon, com aria-hidden: o título já diz a mesma coisa.

  1. Pedido feito

    Pedido nº 48920, 3 itens, R$ 214,90.

  2. Entregue

    Recebido pela portaria.

Horário legível por máquina

Passe dateTime junto com time quando um programa precisar da data exata, para ordenar ou levar a um calendário. A pessoa continua lendo a forma curta.

  1. Pedido feito

  2. Enviado

  3. Saiu para entrega

    O carteiro saiu do centro de distribuição de Campinas.

    Etapa atual

  4. Entrega

Etapa atual

Num processo em andamento, coloque aria-current="step" no item atual e deixe as próximas etapas neutras. O badge mostra a etapa para todos, não só pela cor.

  1. Marina Costa comentou

    O cliente pediu para dividir o pagamento em duas vezes.

  2. Fatura enviada

    Enviada para financeiro@acmelogistica.com.br.

    Ver fatura FAT-4029

Links e avatares

Os children ficam embaixo da descrição, então um evento pode levar ao que ele mudou. Dê nome à lista com aria-label quando a página tiver mais de uma.

Mostrando 5 de 5 eventos

  1. Deploy iniciado

  2. Testes aprovados

  3. Migração lenta

  4. Health check falhou

  5. Rollback para a 2.7.4

Filtrando eventos

Escolha Alertas. A lista mantém a ordem, e uma linha de status diz ao leitor de tela quantos eventos sobraram, já que a mudança acontece longe do foco.

Em contexto

A timeline costuma ficar num card ou num painel lateral, embaixo do registro a que pertence. Estas são partes inteiras de interface que você pode copiar, no skin que escolheu.

Pedido nº 48920

Entregue

  1. Pedido feito

    Pedido nº 48920, 3 itens, R$ 214,90.

  2. Pagamento aprovado

    Pix recebido.

  3. Enviado

    Entregue aos Correios, código QB 123 456 789 BR.

  4. Saiu para entrega

    O carteiro saiu do centro de distribuição de Campinas.

  5. Entregue

    Recebido pela portaria.

Rastreio de pedidoCard · Timeline · Badge

Chamado nº 3312: cobrança em dobro

Resolvido

  1. Chamado aberto

    O cliente foi cobrado duas vezes pelo plano de outubro.

  2. Atribuído a Sofia Vance

    Equipe de cobrança, nível 2.

  3. Estorno feito

    R$ 49,00 devolvidos no cartão. O cliente foi avisado.

Histórico de chamadoCard · Timeline · Avatar · Badge

Novidades

  1. Versão 1.4.0

    Subcontas e relatórios fiscais automáticos.

    Mais recente

  2. Versão 1.3.2

    Corrige a renovação do token depois de trocar a senha.

  3. Versão 1.3.0

    Exportação de relatórios em CSV e PDF.

Notas de versãoCard · Timeline · Badge

Boas práticas

  1. Pedido feito

  2. Entregue

FaçaDê data e hora reais a cada evento.

A pessoa precisa saber quando algo aconteceu, e o dateTime dá a mesma resposta aos programas.

  1. Pedido feito

  2. Entregue

Evite"Há um tempo" em todos os eventos.

Horários vagos não se comparam, então ninguém sabe quanto tempo uma etapa levou.

  1. Pedido feito

  2. Enviado

  3. Entregue

FaçaMantenha uma ordem: mais antigo ou mais recente primeiro.

Mais antigo primeiro conta um processo passo a passo; mais recente primeiro serve para feeds de atividade. Escolha uma por lista.

  1. Enviado

  2. Entregue

  3. Pedido feito

EviteEventos fora de ordem.

A lista é um <ol>, então o leitor de tela anuncia cada posição, e uma ordem errada conta a história errada.

Props

PropriedadeTipoPadrãoDescrição
toneTimelineTone"neutral"Cor do indicador. É só visual (o indicador tem aria-hidden), então o título precisa dizer o que aconteceu.
iconReactNode—Substitui o ponto dentro do indicador, como um ícone ou um avatar pequeno. Fica escondido do leitor de tela.
titleReactNode—O que aconteceu, em poucas palavras. Vira um TimelineTitle.
descriptionReactNode—Detalhes embaixo do título. Vira um TimelineDescription.
timeReactNode—Quando aconteceu, no fim da linha, num <time>.
dateTimestring—A forma legível por máquina de time, como 2026-10-27T09:14.
childrenReactNode—Conteúdo extra embaixo da descrição, como um link, um badge ou um TimelineTime com dateTime.

Timeline aceita os atributos de <ol>, e TimelineItem os de <li>, como aria-current. TimelineTitle e TimelineDescription aceitam os de <p>, e TimelineTime os de <time>, como dateTime.

Styling hooks

Mude o visual sem fazer fork: use os atributos ou defina os tokens num elemento pai, num skin ou na própria timeline.

Atributos

data-toneneutral · brand · success · warning · danger (no item e no indicador)

Tokens que ele lê

Cor

--cml-accent-text--cml-border-control--cml-card-border--cml-card-shadow--cml-danger--cml-fg--cml-fg-secondary--cml-success--cml-surface-raised--cml-warning

Forma e tamanho

--cml-border-width--cml-radius-pill--cml-radius-popover

Só deste componente

--cml-corner-shape--cml-timeline-dot-radius--cml-timeline-line

Acessibilidade

TabA timeline não recebe foco. O Tab só passa pelos links e botões dentro dos eventos.

Relacionados

ProgressMostra quanto falta de uma tarefa, quando as etapas em si não importam.Data listPares de rótulo e valor para os detalhes de um registro.BadgeUm status curto, como Entregue ou Resolvido, ao lado do título da timeline.
Esta página foi útil? · Editar esta página no GitHub