Módulos visuais
mad-timeline
mad-timeline-item
Básico
mad-timeline-item declarativo, com ícone, cor e agrupamento por data automático.
28/08/2026
09:12
Pedido criado
Pedido criado por Ana Silva.
10:40
Pagamento
PIX recebido — R$ 1.450,00.
14:05
Aprovado
Aprovação automática — valor dentro do limite.
resources/views/tutor/examples/modulos-timeline/basico.blade.php
<mad-timeline>
<mad-timeline-item date="2026-08-28 09:12" icon="file-text" title="Pedido criado">
Pedido criado por Ana Silva.
</mad-timeline-item>
<mad-timeline-item date="2026-08-28 10:40" icon="credit-card" color="info" title="Pagamento">
PIX recebido — R$ 1.450,00.
</mad-timeline-item>
<mad-timeline-item date="2026-08-28 14:05" icon="check-circle" color="success" title="Aprovado">
Aprovação automática — valor dentro do limite.
</mad-timeline-item>
</mad-timeline>
Com cards
Itens via array (:items) + cards — cada evento vira um card com borda e fundo.
27/08/2026
08:00
Separação
Itens conferidos no estoque.
15:30
Despachado
Coletado pela transportadora.
28/08/2026
11:15
Entregue
Recebido pelo destinatário.
resources/views/tutor/examples/modulos-timeline/cards.blade.php
@php
$entregas = [
['title' => 'Separação', 'body' => 'Itens conferidos no estoque.', 'date' => '2026-08-27 08:00', 'icon' => 'package', 'color' => 'info'],
['title' => 'Despachado', 'body' => 'Coletado pela transportadora.', 'date' => '2026-08-27 15:30', 'icon' => 'truck', 'color' => 'warning'],
['title' => 'Entregue', 'body' => 'Recebido pelo destinatário.', 'date' => '2026-08-28 11:15', 'icon' => 'check-circle', 'color' => 'success'],
];
@endphp
<mad-timeline :items="$entregas" cards />
Conversa (both-sides)
Layout alternado esquerda/direita, útil para chat/histórico de atendimento.
Cliente
Qual o status do meu pedido?
Atendente
Seu pedido está em separação, deve sair hoje!
Cliente
Perfeito, obrigado!
resources/views/tutor/examples/modulos-timeline/both-sides.blade.php
<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 está em separação, deve sair hoje!
</mad-timeline-item>
<mad-timeline-item icon="user" color="info" title="Cliente">
Perfeito, obrigado!
</mad-timeline-item>
</mad-timeline>
Sem agrupamento por data
group-by-date desligado — lista simples de etapas em sequência.
Etapa 1 — Cadastro
Concluída.
Etapa 2 — Documentos
Concluída.
Etapa 3 — Aprovação final
Pendente.
resources/views/tutor/examples/modulos-timeline/sem-agrupamento.blade.php
<mad-timeline :group-by-date="false">
<mad-timeline-item icon="circle-dot" color="success" title="Etapa 1 — Cadastro">
Concluída.
</mad-timeline-item>
<mad-timeline-item icon="circle-dot" color="success" title="Etapa 2 — Documentos">
Concluída.
</mad-timeline-item>
<mad-timeline-item icon="circle" title="Etapa 3 — Aprovação final">
Pendente.
</mad-timeline-item>
</mad-timeline>
Cores dos eventos
Item sem color cai no cinza padrão; danger sinaliza falha.
25/08/2026
08:00
Etapa sem cor definida
Item sem <code>color</code> — cai no cinza padrão.
09:30
Falha no processamento
Erro ao contatar o serviço de pagamento — tentativa registrada para nova cobrança.
resources/views/tutor/examples/modulos-timeline/sem-cor.blade.php
<mad-timeline>
<mad-timeline-item date="2026-08-25 08:00" icon="circle" title="Etapa sem cor definida">
Item sem <code>color</code> — cai no cinza padrão.
</mad-timeline-item>
<mad-timeline-item date="2026-08-25 09:30" icon="circle" color="danger" title="Falha no processamento">
Erro ao contatar o serviço de pagamento — tentativa registrada para nova cobrança.
</mad-timeline-item>
</mad-timeline>
Código-fonte completo da página
app/control/Tutor/TutorModulosTimeline.php
<?php
namespace App\Control\Tutor;
use App\Support\Tutor\TutorPage;
/**
* TutorModulosTimeline — <mad-timeline> + <mad-timeline-item>.
*
* 100% declarativo: os 5 exemplos usam itens manuais (filhos
* <mad-timeline-item> ou array via :items) — não precisa de fixture nem de
* auto-query em model, então esta página não tem estado nenhum.
*/
class TutorModulosTimeline extends TutorPage
{
protected string $catalogKey = 'modulos_timeline';
}
resources/views/tutor/modulos/timeline.blade.php
<x-tutor-page page="modulos_timeline">
<x-tutor-demo demo="tutor.examples.modulos-timeline.basico"
title="Básico" desc="mad-timeline-item declarativo, com ícone, cor e agrupamento por data automático." />
<x-tutor-demo demo="tutor.examples.modulos-timeline.cards"
title="Com cards" desc="Itens via array (:items) + cards — cada evento vira um card com borda e fundo." />
<x-tutor-demo demo="tutor.examples.modulos-timeline.both-sides"
title="Conversa (both-sides)" desc="Layout alternado esquerda/direita, útil para chat/histórico de atendimento." />
<x-tutor-demo demo="tutor.examples.modulos-timeline.sem-agrupamento"
title="Sem agrupamento por data" desc="group-by-date desligado — lista simples de etapas em sequência." />
<x-tutor-demo demo="tutor.examples.modulos-timeline.sem-cor"
title="Cores dos eventos" desc="Item sem color cai no cinza padrão; danger sinaliza falha." />
</x-tutor-page>