mad-accordion

Componente de painel expansivel/recolhivel. Cada item gerencia seu proprio estado de abertura via Alpine (x-data), permitindo multiplos itens abertos simultaneamente.

Estrutura obrigatoria#

<mad-accordion>
    <mad-accordion-item heading="Titulo 1" expanded="1">
        Conteudo do primeiro item.
    </mad-accordion-item>
    <mad-accordion-item heading="Titulo 2">
        Conteudo do segundo item.
    </mad-accordion-item>
    <mad-accordion-item heading="Titulo 3">
        Conteudo do terceiro item.
    </mad-accordion-item>
</mad-accordion>

Cada <mad-accordion-item> e independente — abrir um nao fecha os outros (multi-open por padrao).

Props do <mad-accordion>#

Props do <mad-accordion-item>#

O conteudo (slot) do <mad-accordion-item> vira o corpo expansivel.

Multi-open (padrao)#

Como cada item tem seu proprio x-data, varios podem ficar abertos ao mesmo tempo:

<mad-accordion>
    <mad-accordion-item heading="Politica de privacidade">
        Texto longo da politica...
    </mad-accordion-item>
    <mad-accordion-item heading="Termos de uso">
        Texto longo dos termos...
    </mad-accordion-item>
</mad-accordion>

Item aberto por padrao#

<mad-accordion>
    <mad-accordion-item heading="O que e o sistema?" expanded="1">
        Item ja aberto no carregamento da pagina.
    </mad-accordion-item>
    <mad-accordion-item heading="Como comecar?">
        Item recolhido por padrao.
    </mad-accordion-item>
</mad-accordion>

Heading com HTML/icone#

<mad-accordion>
    <mad-accordion-item :heading="'<i data-lucide=&quot;info&quot;></i> Informacoes'">
        Conteudo...
    </mad-accordion-item>
</mad-accordion>

Para markup mais complexo no titulo, prefira pre-computar no @php:

@php $title = '<strong>Detalhes</strong> do produto'; @endphp
<mad-accordion>
    <mad-accordion-item :heading="$title">
        Conteudo...
    </mad-accordion-item>
</mad-accordion>

Conteudo com componentes MAD#

<mad-accordion>
    <mad-accordion-item heading="Endereco" expanded="1">
        <mad-form-grid :cols="2">
            <mad-input-field name="cep" label="CEP" />
            <mad-input-field name="cidade" label="Cidade" />
        </mad-form-grid>
    </mad-accordion-item>
    <mad-accordion-item heading="Contato">
        <mad-form-grid :cols="2">
            <mad-input-field name="email" label="Email" />
            <mad-input-field name="telefone" label="Telefone" />
        </mad-form-grid>
    </mad-accordion-item>
</mad-accordion>

FAQ — padrao comum#

<mad-accordion>
    <mad-accordion-item heading="Como faco para criar um pedido?" expanded="1">
        Acesse o menu Pedidos > Novo Pedido e preencha os dados.
    </mad-accordion-item>
    <mad-accordion-item heading="Posso editar um pedido aprovado?">
        Nao, pedidos aprovados sao bloqueados para edicao.
    </mad-accordion-item>
    <mad-accordion-item heading="Como cancelar um pedido?">
        Use o botao Cancelar na listagem de pedidos.
    </mad-accordion-item>
</mad-accordion>

NUNCA fazer#

{{-- ERRADO: montar accordion manualmente com HTML/CSS --}}
<div class="accordion">
    <div class="accordion-item">
        <button onclick="this.nextElementSibling.classList.toggle('open')">Titulo</button>
        <div class="accordion-body">Conteudo</div>
    </div>
</div>

{{-- CERTO --}}
<mad-accordion>
    <mad-accordion-item heading="Titulo">Conteudo</mad-accordion-item>
</mad-accordion>

{{-- ERRADO: usar <details>/<summary> nativos --}}
<details>
    <summary>Titulo</summary>
    Conteudo
</details>

{{-- CERTO --}}
<mad-accordion>
    <mad-accordion-item heading="Titulo">Conteudo</mad-accordion-item>
</mad-accordion>

{{-- ERRADO: heading via slot ou conteudo aninhado --}}
<mad-accordion-item>
    <h3>Meu Titulo</h3>
    Conteudo
</mad-accordion-item>

{{-- CERTO: usar prop heading --}}
<mad-accordion-item heading="Meu Titulo">
    Conteudo
</mad-accordion-item>

{{-- ERRADO: {{ }} no heading com traducao (escapa aspas) --}}
<mad-accordion-item heading="{{ __('faq.title') }}">...</mad-accordion-item>

{{-- CERTO: bind PHP --}}
<mad-accordion-item :heading="__('faq.title')">...</mad-accordion-item>

{{-- ERRADO: reimplementar expand/collapse com JS proprio (querySelector, classList) --}}
<script>
document.querySelectorAll('.my-acc-trigger').forEach(btn => {
    btn.addEventListener('click', () => btn.nextElementSibling.classList.toggle('open'));
});
</script>

{{-- CERTO: o componente ja inclui o Alpine x-data, sem JS extra --}}
<mad-accordion>
    <mad-accordion-item heading="Titulo">...</mad-accordion-item>
</mad-accordion>