Accordion Componentes

Lista de itens que expandem/recolhem ao clicar no cabeçalho com seta animada. Suporta sintaxe curta sw-acc.

O que é

Organiza conteúdo longo em seções colapsáveis com animação fluida de altura real — ideal para FAQs, configurações, detalhes técnicos e painéis expansíveis.

Como funciona

Cada item .sw-acc-it possui um cabeçalho clicável .sw-acc-hdr e um corpo de conteúdo .sw-acc-bdy. A seta chevron gira 180° automaticamente e a altura é animada com precisão.

Exemplos

01 · Padrão (Exclusivo — fecha os outros ao abrir) Ao vivo

01. O que é o microframework SWCore?

O SWCore é uma suíte completa e ultrarrápida de 67 componentes e animações integradas com Tailwind CSS v4 e suporte nativo a temas semânticos da web.

02. Como funciona a sintaxe curta e responsiva?

Todos os componentes suportam atributos diretos e concisos (como sw-acc, sw-drop, sw-btn, sw-modal), garantindo escrita limpa e alta legibilidade.

03. Posso customizar as cores e tipografia?

Sim! Através das 8 cores semânticas da marca (Primary, Secondary, Success, Warning, Error, Info, Night e Light) no bloco @theme, todos os componentes se adaptam instantaneamente.

<div sw-acc>
  <div class="sw-acc-it is-act">
    <div class="sw-acc-hdr">01. O que é o microframework SWCore?</div>
    <div class="sw-acc-bdy">O SWCore é uma suíte completa e ultrarrápida de 67 componentes e animações integradas com Tailwind CSS v4 e suporte nativo a temas semânticos da web.</div>
  </div>
  <div class="sw-acc-it">
    <div class="sw-acc-hdr">02. Como funciona a sintaxe curta e responsiva?</div>
    <div class="sw-acc-bdy">Todos os componentes suportam atributos diretos e concisos (como <code>sw-acc</code>, <code>sw-drop</code>, <code>sw-btn</code>, <code>sw-modal</code>), garantindo escrita limpa e alta legibilidade.</div>
  </div>
  <div class="sw-acc-it">
    <div class="sw-acc-hdr">03. Posso customizar as cores e tipografia?</div>
    <div class="sw-acc-bdy">Sim! Através das 8 cores semânticas da marca (Primary, Secondary, Success, Warning, Error, Info, Night e Light) no bloco <code>@theme</code>, todos os componentes se adaptam instantaneamente.</div>
  </div>
</div>

02 · Múltiplos Abertos (sw-acc-multi="true") Ao vivo

Módulo de Autenticação & Segurança

Gerencie permissões de acesso, sessões ativas e autenticação em dois fatores de forma independente.

Módulo de Integrações & Webhooks

Permite múltiplos blocos expandidos ao mesmo tempo para comparação de dados e configuração de rotas.

Módulo de Banco de Dados & Backups

Logs diários e rotinas automáticas de espelhamento em nuvem.

<div sw-acc sw-acc-multi="true">
  <div class="sw-acc-it is-act">
    <div class="sw-acc-hdr">Módulo de Autenticação & Segurança</div>
    <div class="sw-acc-bdy">Gerencie permissões de acesso, sessões ativas e autenticação em dois fatores de forma independente.</div>
  </div>
  <div class="sw-acc-it is-act">
    <div class="sw-acc-hdr">Módulo de Integrações & Webhooks</div>
    <div class="sw-acc-bdy">Permite múltiplos blocos expandidos ao mesmo tempo para comparação de dados e configuração de rotas.</div>
  </div>
  <div class="sw-acc-it">
    <div class="sw-acc-hdr">Módulo de Banco de Dados & Backups</div>
    <div class="sw-acc-bdy">Logs diários e rotinas automáticas de espelhamento em nuvem.</div>
  </div>
</div>

Atributos

sw-acc / sw-accordion

no contêiner pai — ativa o acordeão

sw-acc-multi="true" / sw-accordion-multi="true"

permite manter múltiplos itens abertos simultaneamente (por padrão, abrir um fecha os demais)

Variantes

sw-acc / sw-accordion

sintaxe curta canônica ou sintaxe longa

is-act (no .sw-acc-it)

item inicia aberto com a seta já rotacionada

Eventos

sw:accordion:open

{ item } ao abrir um item

sw:accordion:close

{ item } ao fechar um item

API (JavaScript)

SW.Acc.open(container, index) ou SW.Accordion.open(container, index)

abre um item específico por código

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.

← AnteriorDropdown Próximo →Tabs