Accordium

Crie listas expansivas a partir de uma estrutura totalmente sem estilos.

Translation: English

Instalação

Instale o script com o gerenciador de pacotes de sua preferência:

npm install accordium

pnpm install accordium

yarn add accordium

ou utilize o CDN:

<script src="https://unpkg.com/[email protected]/dist/accordium.mjs"></script>

Como usar

Accordium foi pensado para ser simples de ser usado, visando facilitar a sua utilização e proporcionar total liberdade criativa. Após a instalação, basta construir a estrutura HTML inserindo os atributos necessários e instanciar a classe:

<!-- Estrutura dos modos 'multiple' e 'single' -->
<div data-accordium>
  <div data-accordium-body>
    <div data-accordium-header>Header</div>
    <div data-accordium-content>Content</div>
  </div>
</div>

<!-- Estrutura do modo 'nested' -->
<div data-accordium>
  <div data-accordium-body>
    <div data-accordium-header>Header</div>
    <div data-accordium-content>
      Content
      <div data-accordium-body>
        <div data-accordium-header>Header</div>
        <div data-accordium-content>Content</div>
      </div>
    </div>
  </div>
</div>

<script>
  new Accordium();
</script>

Opções

É possível passar algumas opções como parâmetro para atender as necessidades do projeto:

| Opção | Tipo | Padrão | Descrição | | ------------- | ------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | mode | string | string[] | 'multiple' | Define qual o modo do accordium. Os modos são atribuídos relativamente à estrutura HTML. Existem 3 modos: multiple, single e nested. Caso haja mais de um accordium, é possível especificar um array de modos correspondentes à ordem desejada para cada instância. | | customClass | string | 'active' | Define a classe que será adicionada ao elemento ativo | | enableAria | boolean | true | Define os atributos de acessibilidade |

// Padrão

new Accordium({
  mode: "multiple",
  customClass: "active",
  enableAria: true,
});

Suporte e Contribuição

Se você encontrar algum problema ou tiver sugestões para melhorias, sinta-se à vontade para abrir uma issue no repositório do GitHub.

Se você deseja contribuir, por favor abra uma pull request no repositório.

Licença

Este projeto está licenciada sob a Licença MIT.