Docs›Componentes (Admin)›mad-timeline
Componentes (Admin)

mad-timeline

Timeline cronológica.

Exibicao cronologica de eventos. Suporta itens manuais (filhos declarativos) e auto-query via model ORM.

Props do <mad-timeline>

Prop Tipo Default Descricao
model string '' Classe model Eloquent para auto-query
database string MAIN_DATABASE Conexao do banco
title-field string 'titulo' Campo do model para titulo
body-field string 'descricao' Campo do model para corpo
date-field string 'created_at' Campo do model para data
icon-field string '' Campo do model para icone Lucide
color-field string '' Campo do model para cor
filters array [] Filtros: [['campo', 'op', 'val'], ...]
order string 'desc' asc ou desc
both-sides bool false Layout alternado esquerda/direita
group-by-date bool true Separadores por data
date-format string 'd/m/Y' Formato da data nos separadores
time-format string 'H:i' Formato da hora nos itens
limit int 0 Maximo de itens (0 = todos)
load-more bool false Limita a query inicial a per-page itens (sem :limit explicito). Nao renderiza botao — e so o teto da carga inicial
per-page int 10 Itens por pagina (usado como teto quando load-more esta ativo)
cards bool false Envolve cada item em card com borda e fundo
class string '' Classes CSS extras
items array [] Itens manuais via array (['title', 'body', 'date', 'icon'?, 'color'?]). So funciona na forma self-closing <mad-timeline :items="..." /> — na forma com filhos <mad-timeline-item>, o array e montado automaticamente

Props do <mad-timeline-item> (filho)

Prop Tipo Default Descricao
date string '' Data/hora do evento
title string '' Titulo do evento
icon string '' Icone Lucide
color string '' success, info, warning, danger

O conteudo (slot) do <mad-timeline-item> vira o corpo do evento.

Com cards (visual separado por item)

<mad-timeline :items="$timelineItems" cards />

<mad-timeline model="HistoricoPedido" cards
    title-field="titulo" body-field="descricao" date-field="dt_evento" />

Itens manuais (declarativo)

<mad-timeline>
    <mad-timeline-item date="2026-04-01 14:32" icon="check-circle" color="success" title="Aprovado">
        Aprovacao automatica — valor dentro do limite.
    </mad-timeline-item>
    <mad-timeline-item date="2026-04-01 11:20" icon="credit-card" color="info" title="Pagamento">
        PIX recebido — R$ 1.450,00
    </mad-timeline-item>
    <mad-timeline-item date="2026-03-31 16:10" icon="file-text" title="Criado">
        Pedido criado por Maria Silva
    </mad-timeline-item>
</mad-timeline>

Via model (auto-query)

<mad-timeline model="HistoricoPedido" database="minierp"
    title-field="titulo" body-field="descricao"
    date-field="dt_evento" icon-field="icone" color-field="cor"
    :filters="[['pedido_id', '=', $pedidoId]]"
    order="desc" />

Both-sides (chat/conversa)

<mad-timeline both-sides :group-by-date="false">
    <mad-timeline-item icon="user" color="info" title="Cliente">
        Qual o status do meu pedido?
    </mad-timeline-item>
    <mad-timeline-item icon="headphones" color="success" title="Atendente">
        Seu pedido esta em separacao!
    </mad-timeline-item>
</mad-timeline>

Sem agrupamento por data

<mad-timeline :group-by-date="false">
    <mad-timeline-item icon="circle-dot" color="success" title="Etapa 1">
        Concluida
    </mad-timeline-item>
    <mad-timeline-item icon="circle" title="Etapa 2">
        Pendente
    </mad-timeline-item>
</mad-timeline>

Limitando a carga inicial

load-more + per-page truncam a query para nao trazer o historico inteiro de uma vez — nao existe botao "carregar mais" nem paginacao AJAX embutida no componente. Para um "ver mais" de fato, troque por uma listagem paginada (<mad-grid>) ou aumente limit/per-page conforme a necessidade.

<mad-timeline model="LogSistema" load-more per-page="20"
    title-field="mensagem" date-field="dt_log" />

Cores dos dots

Cor Uso
success Verde — acao concluida
info Azul — informacao neutra
warning Laranja — atencao
danger Vermelho — erro/problema
(vazio) Cinza — estado padrao

NUNCA fazer

{{-- ERRADO: montar timeline com HTML manual --}}
<ul class="timeline">
    <li>...</li>
</ul>

{{-- CERTO --}}
<mad-timeline>
    <mad-timeline-item ...>...</mad-timeline-item>
</mad-timeline>

{{-- ERRADO: buscar registros no controller e montar HTML manualmente --}}
@php $historico = Historico::orderByDesc('dt')->get(); @endphp
@foreach($historico as $h)
    <div class="my-timeline-item">{{ $h->titulo }} — {{ $h->dt }}</div>
@endforeach

{{-- CERTO: mad-timeline faz o auto-query e a renderizacao --}}
<mad-timeline model="Historico" title-field="titulo" date-field="dt" />