Navegação e overlays
mad-accordion
mad-accordion-item
Básico (FAQ)
mad-accordion multi-open — vários itens podem ficar abertos ao mesmo tempo.
Acesse o menu Pedidos > Novo Pedido e preencha os dados do cliente e dos itens.
Não — pedidos aprovados ficam bloqueados para edição; cancele e crie um novo.
Use a ação "Cancelar" na listagem de pedidos (exige confirmação).
resources/views/tutor/examples/navegacao-accordion/basico.blade.php
<mad-accordion>
<mad-accordion-item heading="Como faço para criar um pedido?" expanded="1">
Acesse o menu Pedidos > Novo Pedido e preencha os dados do cliente e dos itens.
</mad-accordion-item>
<mad-accordion-item heading="Posso editar um pedido já aprovado?">
Não — pedidos aprovados ficam bloqueados para edição; cancele e crie um novo.
</mad-accordion-item>
<mad-accordion-item heading="Como cancelar um pedido?">
Use a ação "Cancelar" na listagem de pedidos (exige confirmação).
</mad-accordion-item>
</mad-accordion>
Heading com ícone (HTML)
heading aceita HTML — pré-compute no @php e passe via :heading.
Plano atual: Profissional. Renovação em 12 dias.
2 faturas em aberto — regularize para evitar bloqueio.
resources/views/tutor/examples/navegacao-accordion/heading-icone.blade.php
@php
// heading aceita HTML (renderizado via {!! !!}) — pre-computar no @php
// evita aspas quebrando o atributo da tag.
$titIcone = '<i data-lucide="info" style="width:14px;height:14px;vertical-align:-2px;margin-right:6px;"></i> Informações da conta';
$titAlerta = '<i data-lucide="alert-triangle" style="width:14px;height:14px;vertical-align:-2px;margin-right:6px;"></i> Pendências';
@endphp
<mad-accordion>
<mad-accordion-item :heading="$titIcone" expanded="1">
Plano atual: Profissional. Renovação em 12 dias.
</mad-accordion-item>
<mad-accordion-item :heading="$titAlerta">
2 faturas em aberto — regularize para evitar bloqueio.
</mad-accordion-item>
</mad-accordion>
Conteúdo com componentes MAD
corpo expansível com mad-form-grid + campos.
resources/views/tutor/examples/navegacao-accordion/com-form.blade.php
<mad-accordion>
<mad-accordion-item heading="Endereço" expanded="1">
<mad-form-grid :cols="2">
<mad-input-field name="cepAccordion" label="CEP" />
<mad-input-field name="cidadeAccordion" label="Cidade" />
</mad-form-grid>
</mad-accordion-item>
<mad-accordion-item heading="Contato">
<mad-form-grid :cols="2">
<mad-input-field name="emailAccordion" label="E-mail" type="email" />
<mad-input-field name="telefoneAccordion" label="Telefone" />
</mad-form-grid>
</mad-accordion-item>
</mad-accordion>
Carregamento sob demanda (ação wire)
conteúdo carregado no clique via MadResponse->html() — sem custo até o usuário pedir.
Os números ainda não foram carregados.
resources/views/tutor/examples/navegacao-accordion/wire-carregamento.blade.php
<mad-accordion>
<mad-accordion-item heading="Relatório mensal (carregar sob demanda)" expanded="1">
<div id="tutor-accordion-relatorio">
<p>Os números ainda não foram carregados.</p>
<mad-btn variant="primary" icon="refresh-cw" mad:click="onCarregarRelatorioAccordion">Carregar dados</mad-btn>
</div>
</mad-accordion-item>
</mad-accordion>
app/control/Tutor/TutorNavegacaoAccordion.php
/** Simula uma consulta cara — só roda quando o usuário pede (clique). */
public function onCarregarRelatorioAccordion(): MadResponse
{
$r = self::RELATORIO_DEMO;
$html = '<ul style="margin:0;padding-left:1.2rem;">'
. '<li>Pedidos no mês: <strong>' . $r['pedidos'] . '</strong></li>'
. '<li>Clientes ativos: <strong>' . $r['clientes'] . '</strong></li>'
. '<li>Receita: <strong>R$ ' . number_format($r['receita'], 2, ',', '.') . '</strong></li>'
. '</ul>';
return (new MadResponse())->html('#tutor-accordion-relatorio', $html);
}
Código-fonte completo da página
app/control/Tutor/TutorNavegacaoAccordion.php
<?php
namespace App\Control\Tutor;
use App\Support\Tutor\TutorPage;
use Mad\Http\MadResponse;
/**
* TutorNavegacaoAccordion — página "Accordion" do MAD Lab.
*
* Cobre mad-accordion/mad-accordion-item: multi-open (FAQ), heading com
* HTML/ícone pré-computado no @php, corpo expansível com componentes MAD
* (mad-form-grid) e carregamento sob demanda via ação wire real.
*/
class TutorNavegacaoAccordion extends TutorPage
{
protected string $catalogKey = 'navegacao_accordion';
/** Fixture local (sem banco) do exemplo "Carregamento sob demanda". */
private const RELATORIO_DEMO = [
'pedidos' => 128,
'clientes' => 47,
'receita' => 18420.50,
];
/** Simula uma consulta cara — só roda quando o usuário pede (clique). */
public function onCarregarRelatorioAccordion(): MadResponse
{
$r = self::RELATORIO_DEMO;
$html = '<ul style="margin:0;padding-left:1.2rem;">'
. '<li>Pedidos no mês: <strong>' . $r['pedidos'] . '</strong></li>'
. '<li>Clientes ativos: <strong>' . $r['clientes'] . '</strong></li>'
. '<li>Receita: <strong>R$ ' . number_format($r['receita'], 2, ',', '.') . '</strong></li>'
. '</ul>';
return (new MadResponse())->html('#tutor-accordion-relatorio', $html);
}
}
resources/views/tutor/navegacao/accordion.blade.php
<x-tutor-page page="navegacao_accordion">
<x-tutor-demo demo="tutor.examples.navegacao-accordion.basico"
title="Básico (FAQ)" desc="mad-accordion multi-open — vários itens podem ficar abertos ao mesmo tempo." />
<x-tutor-demo demo="tutor.examples.navegacao-accordion.heading-icone"
title="Heading com ícone (HTML)" desc="heading aceita HTML — pré-compute no @php e passe via :heading." />
<x-tutor-demo demo="tutor.examples.navegacao-accordion.com-form"
title="Conteúdo com componentes MAD" desc="corpo expansível com mad-form-grid + campos." />
<x-tutor-demo demo="tutor.examples.navegacao-accordion.wire-carregamento"
title="Carregamento sob demanda (ação wire)" desc="conteúdo carregado no clique via MadResponse->html() — sem custo até o usuário pedir."
php="TutorNavegacaoAccordion::onCarregarRelatorioAccordion" />
</x-tutor-page>