Docs›Componentes (Admin)›mad-page-container & header
Componentes (Admin)

mad-page-container & header

Estrutura de página: container, header, content.

Estrutura padrão de toda página self::INTERNAL (listagem, dashboard, view de detalhe). Define o "esqueleto" — container, header com título/breadcrumb/ações e área de conteúdo.

Hierarquia obrigatória

<mad-page-container>
    <mad-page-header title="..." icon="..." breadcrumb="...">
        <actions>
            <mad-btn ...>Novo</mad-btn>
        </actions>
    </mad-page-header>

    <mad-page-content>
        ...grid, cards, forms, etc...
    </mad-page-content>
</mad-page-container>

A ordem importa: <mad-page-header> SEMPRE antes de <mad-page-content>, ambos dentro de <mad-page-container>.

<mad-page-container> — wrapper externo

Container raiz da página. Aplica .mad-ui (escopo de estilos) + padding base.

Prop Tipo Default Descrição
class string '' Classes CSS extras
style string '' Estilos inline extras

<mad-page-header> — cabeçalho

Bloco de topo com ícone, breadcrumb, título e área de ações à direita. Separador inferior automático.

Prop Tipo Default Descrição
title string '' Título principal (h1)
breadcrumb string null Trilha de navegação. Ex: 'Módulo > Submódulo > Tela'
icon string null Ícone Lucide ao lado do título
actions string null HTML pré-computado das ações (alternativa ao slot)
class string '' Classes CSS extras
style string '' Estilos inline extras

Slot <actions> — botões do topo

<mad-page-header title="Pedidos" icon="shopping-cart" breadcrumb="Vendas > Pedidos">
    <actions>
        <mad-btn navigate="PedidoForm" variant="primary" icon="plus">Novo Pedido</mad-btn>
        <mad-btn navigate="PedidoDashboard" variant="outline" icon="activity">Dashboard</mad-btn>
    </actions>
</mad-page-header>

Variações

{{-- Sem ações --}}
<mad-page-header title="Log" icon="file-text" breadcrumb="Admin > Log" />

{{-- Sem ícone --}}
<mad-page-header title="Relatório" breadcrumb="Financeiro > Relatórios" />

{{-- Apenas título --}}
<mad-page-header title="Dashboard" />

<mad-page-content> — área de conteúdo

Container da área principal (abaixo do header). Suporta toolbar opcional.

Prop Tipo Default Descrição
toolbar string null HTML pré-computado de toolbar secundária
class string '' Classes CSS extras
style string '' Estilos inline extras 
<mad-page-content>
    <mad-grid self per-page="15">
        ...
    </mad-grid>
</mad-page-content>

{{-- Com toolbar --}}
@php $toolbar = '<mad-btn icon="filter">Filtrar</mad-btn>'; @endphp
<mad-page-content :toolbar="$toolbar">
    ...
</mad-page-content>

Exemplos

Listagem

<mad-page-container>
    <mad-page-header title="Pedidos" icon="shopping-cart" breadcrumb="Vendas > Pedidos">
        <actions>
            <mad-btn navigate="PedidoForm" variant="primary" icon="plus">Novo</mad-btn>
            <mad-btn open-drawer="filtros" variant="outline" icon="sliders-horizontal">Filtros</mad-btn>
        </actions>
    </mad-page-header>

    <mad-page-content>
        <mad-grid self per-page="15">
            <mad-columns>
                <mad-col field="id" label="Cod." width="70" center sort />
                <mad-col field="cliente_nome" label="Cliente" sort filter />
                <mad-col field="valor" label="Valor" right money="R$" total="sum" />
            </mad-columns>
            <mad-actions>
                <mad-nav icon="pencil" label="Editar" target="PedidoForm::onEdit({id})" />
            </mad-actions>
        </mad-grid>
    </mad-page-content>
</mad-page-container>

View de detalhe

<mad-page-container>
    <mad-page-header :title="'Pedido #' . $pedido->id" icon="file-text">
        <actions>
            <mad-btn navigate="PedidoListagem" variant="ghost" icon="arrow-left">Voltar</mad-btn>
            <mad-btn mad:click="onAprovar" variant="success" icon="check">Aprovar</mad-btn>
        </actions>
    </mad-page-header>

    <mad-page-content>
        <mad-form-section title="Dados" icon="info">
            <mad-form-grid :cols="3">
                <mad-display-field name="numero" label="Número" />
                <mad-display-field name="cliente" label="Cliente" />
                <mad-display-field name="valor" label="Valor" format="money:R$" />
            </mad-form-grid>
        </mad-form-section>
    </mad-page-content>
</mad-page-container>

Dashboard

<mad-page-container>
    <mad-page-header title="Dashboard" icon="layout-dashboard" breadcrumb="Início" />
    <mad-page-content>
        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;">
            <mad-db-metric-card model="Pedido" total="count" label="Pedidos" icon="shopping-cart" />
            <mad-db-metric-card model="Cliente" total="count" label="Clientes" icon="users" />
        </div>
    </mad-page-content>
</mad-page-container>

NUNCA fazer

{{-- ERRADO: header manual com div + h1 --}}
<div class="page">
    <h1>Pedidos</h1>
    <div class="actions"><button>Novo</button></div>
</div>

{{-- CERTO --}}
<mad-page-container>
    <mad-page-header title="Pedidos" icon="shopping-cart">
        <actions>
            <mad-btn navigate="PedidoForm" variant="primary" icon="plus">Novo</mad-btn>
        </actions>
    </mad-page-header>
    <mad-page-content>...</mad-page-content>
</mad-page-container>

{{-- ERRADO: usar page-container em DRAWER/MODAL --}}
{{-- (drawer/modal já tem seu próprio chrome) --}}

{{-- ERRADO: botões fora do slot <actions> --}}
<mad-page-header title="Pedidos" icon="shopping-cart" />
<mad-btn variant="primary">Novo</mad-btn>  {{-- fora do header! --}}

{{-- ERRADO: {{ __() }} em atributo --}}
<mad-page-header title="{{ __('pedido.list') }}" />

{{-- CERTO: bind PHP --}}
<mad-page-header :title="__('pedido.list')" />