Timeline

Apresentação

O componente Timeline é responsável por exibir uma linha do tempo visual, permitindo organizar eventos ou ações em ordem cronológica. Ele oferece uma estrutura clara para apresentar sequências de eventos, com suporte a diferentes estilos e personalizações.

Quando usar

• Para exibir histórico de eventos
• Para mostrar progresso de atividades
• Para criar cronogramas
• Para apresentar sequências de ações
• Para exibir logs de atividades
• Para criar visualizações de processo

Forma básica de uso

import { Timeline } from 'eitri-luminus';

// Timeline básica
<Timeline>
  <Timeline.Item>
    <Timeline.Start>2024</Timeline.Start>
    <Timeline.Middle>
      <div className="badge badge-primary">Evento</div>
    </Timeline.Middle>
    <Timeline.End>Descrição do evento</Timeline.End>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Start>2023</Timeline.Start>
    <Timeline.Middle>
      <div className="badge badge-secondary">Evento</div>
    </Timeline.Middle>
    <Timeline.End>Outro evento</Timeline.End>
  </Timeline.Item>
</Timeline>

// Timeline com classes personalizadas
<Timeline className="timeline-vertical">
  <Timeline.Item
    firstItem
    classNameFirstLine="border-primary"
  >
    <Timeline.Start>Início</Timeline.Start>
    <Timeline.Middle>
      <div className="badge">1</div>
    </Timeline.Middle>
    <Timeline.End>Primeiro evento</Timeline.End>
  </Timeline.Item>
  <Timeline.Item
    lastItem
    classNameLastLine="border-secondary"
  >
    <Timeline.Start>Fim</Timeline.Start>
    <Timeline.Middle>
      <div className="badge">2</div>
    </Timeline.Middle>
    <Timeline.End>Último evento</Timeline.End>
  </Timeline.Item>
</Timeline>

// Timeline com conteúdo rico
<Timeline>
  <Timeline.Item>
    <Timeline.Start>
      <div className="font-bold">Janeiro</div>
      <div className="text-sm">2024</div>
    </Timeline.Start>
    <Timeline.Middle>
      <div className="avatar">
        <div className="w-8 rounded-full">
          <img src="/avatar.jpg" alt="Avatar" />
        </div>
      </div>
    </Timeline.Middle>
    <Timeline.End>
      <div className="card bg-base-200">
        <div className="card-body">
          <h3 className="card-title">Título do Evento</h3>
          <p>Descrição detalhada do evento</p>
        </div>
      </div>
    </Timeline.End>
  </Timeline.Item>
</Timeline>

Propriedades

Timeline

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o container
id	string	Identificador único do componente

Timeline.Item

Propriedade	Tipo	Descrição
firstItem	boolean	Define se é o primeiro item da timeline
lastItem	boolean	Define se é o último item da timeline
classNameFirstLine	string	Classes CSS para a linha antes do item
classNameLastLine	string	Classes CSS para a linha depois do item
className	string	Classes CSS adicionais para o item
id	string	Identificador único do componente

Timeline.Start

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o início
id	string	Identificador único do componente

Timeline.Middle

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o meio
id	string	Identificador único do componente

Timeline.End

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o fim
id	string	Identificador único do componente

Heranças

O componente Timeline e seus subcomponentes herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa uma estrutura de lista para organização
• Suporta diferentes orientações (vertical/horizontal)
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Permite estilização personalizada das linhas de conexão
• Suporta conteúdo rico em cada seção
• Ideal para visualização de sequências temporais
• Mantém a semântica HTML usando tags apropriadas
• Pode ser combinado com outros componentes para criar visualizações complexas
• Suporta diferentes estilos de indicadores no meio
• Permite personalização completa de cada seção