SWCore / CSS / Timeline

Timeline CSS

Linha do tempo — histórico de pedido, changelog, deploy — vertical ou horizontal, com 4 estados de marcador.

O que é

Lista de eventos em ordem, cada um com um marcador redondo preso a uma linha contínua. Cada item usa 4 peças opcionais: bolinha, hora, título e descrição.

Como funciona

100% CSS. A linha é um ::before no contêiner ([sw-tml]), não um elemento — os marcadores (.sw-tml-dot) ficam posicionados em cima dela via position:absolute. sw-tml="h" vira horizontal e rola de lado se não couber.

Exemplos

Vertical — 4 estados de marcador Ao vivo
✓
Hoje · 09:20
Deploy concluído
0 erros, build 1m42s.
Ontem · 18:05
Testes aprovados
75/75 passando.
!
Branch de release aberta
release/2.4.1 a partir de main.
×
Build quebrou
dependência faltando, corrigido.
Escopo fechado
ponto sem estado (padrão).
<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-suc"></div>
    <div class="sw-tml-tme">Hoje · 09:20</div>
    <div class="sw-tml-ttl">Pagamento confirmado</div>
    <div class="sw-tml-txt">Pedido liberado para separação.</div>
  </div>
  <div class="sw-tml-it">
    <div class="sw-tml-dot"></div>
    <div class="sw-tml-ttl">Em separação</div>
    <div class="sw-tml-txt">Previsão de envio: amanhã.</div>
  </div>
</div>
<!-- estados da bolinha: .is-suc .is-ale .is-err .is-fil (ou vazia) -->
Horizontal (sw-tml="h") Ao vivo
1
Pedido feito
12/03
2
Pagamento
12/03
3
Enviado
13/03
4
Entrega
previsto 16/03
<div sw-tml="h">
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-fil">1</div>
    <div class="sw-tml-ttl">Pedido feito</div>
    <div class="sw-tml-txt">12/03</div>
  </div>
  …
</div>

<!-- se não couber na largura, ele rola de lado sozinho -->
Os 5 estados da bolinha Ao vivo
Sem estado
bolinha vazia — o padrão, pra evento neutro
.is-fil
preenchida — etapa já concluída
.is-suc
deu certo
.is-ale
atenção, algo a conferir
.is-err
falhou
<div class="sw-tml-dot"></div>          <!-- neutra -->
<div class="sw-tml-dot is-fil"></div>   <!-- concluída -->
<div class="sw-tml-dot is-suc"></div>   <!-- sucesso -->
<div class="sw-tml-dot is-ale"></div>   <!-- atenção -->
<div class="sw-tml-dot is-err"></div>   <!-- erro -->

<!-- a bolinha aceita conteúdo dentro: número, ✓, × ou ícone -->
<div class="sw-tml-dot is-suc"><i class="swi-check"></i></div>
Só o essencial Ao vivo
Conta criada
E-mail confirmado
Perfil completo
<!-- as 4 peças são opcionais: use só o que precisar -->
<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-suc"></div>
    <div class="sw-tml-ttl">Conta criada</div>
  </div>
</div>

<!-- .sw-tml-tme (hora) e .sw-tml-txt (descrição) podem ficar de fora -->

Atributos

Nenhum.

Variantes

sw-tml (sem valor)
vertical, o padrão
h
horizontal — rola de lado se não couber
.sw-tml-it
um por evento
.sw-tml-dot (+ .is-suc/.is-ale/.is-err/.is-fil, ou vazia)
a bolinha — pode ter texto/ícone dentro; 4 estados de cor
.sw-tml-tme · .sw-tml-ttl · .sw-tml-txt
hora · título · descrição do evento

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

  • É 100% CSS: a linha e os marcadores não sabem de "progresso" — quem decide qual bolinha está em qual estado é você, no HTML.
  • Pra um fluxo de etapas com navegação (passo 1, 2, 3 de um formulário), o componente certo é o Stepper.
← AnteriorDivider Próximo →Skeleton