mad-card

Container visual com borda, fundo e sombra. Header e footer opcionais. O conteudo principal vai no slot.

Props#

header e footer sao props (valor pre-computado), nao slots nomeados. O compilador Blade do MAD (Mad\View\MadBladeCompiler, baseado no Illuminate\View\Compilers\BladeCompiler) desliga de proposito o ComponentTagCompiler nativo do Laravel — todos os ~100 templates mad-* usam a API classica startComponent()/renderComponent(), onde cada atributo passado vira uma variavel PHP no template. Essa API classica nao suporta <x-slot name="...">, entao header/footer precisam vir prontos como valor.

CRITICO — header/footer escapam por default#

Uma string comum passada em header/footer e escapada (e($v)): passar '<strong>Titulo</strong>' imprime as tags como texto, nao renderiza negrito. Isso e proposital — header/footer costumam receber texto vindo do banco, e o {!! !!} antigo era XSS armazenado.

Para HTML intencional, passe um Illuminate\Support\HtmlString (qualquer Illuminate\Contracts\Support\Htmlable serve) — so entao o conteudo sai cru:

@php
    use Illuminate\Support\HtmlString;
    $header = new HtmlString('<strong>Resumo do pedido</strong>');
@endphp
<mad-card :header="$header">
    <div style="padding:16px;">...</div>
</mad-card>

Texto simples (o caso mais comum) continua funcionando direto, sem wrapper:

@php $header = __('ged.title'); @endphp
<mad-card :header="$header">...</mad-card>

Card simples (so conteudo)#

<mad-card>
    <div style="padding:16px;">
        Conteudo do card.
    </div>
</mad-card>

Card com header#

@php
    use Illuminate\Support\HtmlString;
    $header = new HtmlString('<h3 style="margin:0;font-size:0.95rem;font-weight:600;">Ultimas falhas</h3>');
@endphp
<mad-card :header="$header">
    <div style="padding:16px;">
        <mad-grid model="MadQueueFailedJob" database="permission" per-page="5" no-export />
    </div>
</mad-card>

Card com header e footer#

@php
    use Illuminate\Support\HtmlString;
    $header = new HtmlString('<strong>Resumo do pedido</strong>');
    $footer = new HtmlString('<div style="display:flex;justify-content:flex-end;gap:8px;">
                  <button class="mad-btn mad-btn-ghost">Cancelar</button>
                  <button class="mad-btn mad-btn-primary">Confirmar</button>
              </div>');
@endphp
<mad-card :header="$header" :footer="$footer">
    <div style="padding:16px;">
        Itens, totais, observacoes...
    </div>
</mad-card>

Card com actions no header#

@php
    use Illuminate\Support\HtmlString;
    $header = new HtmlString('<div style="display:flex;align-items:center;justify-content:space-between;">
                  <strong>Clientes ativos</strong>
                  <a href="#" class="mad-btn mad-btn-ghost mad-btn-sm">Ver todos</a>
              </div>');
@endphp
<mad-card :header="$header">
    <div style="padding:16px;">
        ...
    </div>
</mad-card>

Grid de cards#

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;">
    <mad-card><div style="padding:16px;">Card 1</div></mad-card>
    <mad-card><div style="padding:16px;">Card 2</div></mad-card>
    <mad-card><div style="padding:16px;">Card 3</div></mad-card>
</div>

Com classes/estilos extras#

<mad-card class="meu-card-destaque" style="max-width:480px;">
    <div style="padding:16px;">...</div>
</mad-card>

NUNCA fazer#

{{-- ERRADO: usar named slot — o compilador classico do MAD nao suporta, gera "Template not found: components.slot" --}}
<mad-card>
    <x-slot name="header">Titulo</x-slot>
    Conteudo...
</mad-card>

{{-- CERTO: header como prop pre-computada --}}
@php $header = 'Titulo'; @endphp
<mad-card :header="$header">Conteudo...</mad-card>

{{-- ERRADO: HTML como string pura — sai escapado, aparece "<strong>" na tela --}}
@php $header = '<strong>Titulo</strong>'; @endphp
<mad-card :header="$header">Conteudo...</mad-card>

{{-- CERTO: HTML intencional via HtmlString --}}
@php $header = new \Illuminate\Support\HtmlString('<strong>Titulo</strong>'); @endphp
<mad-card :header="$header">Conteudo...</mad-card>

{{-- ERRADO: header como atributo string com aspas e {{ }} --}}
<mad-card header="{{ __('ged.title') }}">...</mad-card>

{{-- CERTO --}}
@php $header = __('ged.title'); @endphp
<mad-card :header="$header">...</mad-card>

{{-- ERRADO: montar card manualmente com div + classes --}}
<div class="card border rounded shadow">
    <div class="card-header">Titulo</div>
    <div class="card-body">Conteudo</div>
</div>

{{-- CERTO --}}
<mad-card :header="$header"><div style="padding:16px;">Conteudo</div></mad-card>