Accordion

Sobre

Componente para accordion vertical animado.

Dependências

Não há.

Instalação

• Instale o app através do seu terminal

npm install @wapstore/accordion

• Valide se seu arquivo package.json possui a dependência

"dependencies": {
  "@wapstore/accordion": "0.0.4"
}

Agora a loja está apta para o uso da aplicação.

Uso

O componente de Accordion pode ser inserido em qualquer lugar da pasta "components" ou "pages". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

Exemplo

-Este é um exemplo da aplicação de um arquivo padrão para um Accordion de conteúdos:

<template>
  <accordion>
    <template #accordionTopo>
      <div>
        <h2>
          Título
        </h2>
      </div>
    </template>
    <template #accordionConteudo>
      <div class="accordionConteudo">
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
    </template>
  </accordion>
</template>
<script>
  ...
</script>
<style>
  ...
</style>

Recursos

Props

| Prop | Descrição | Tipo | |---|---|---| | config 0.0.4 | Para configuração do accordion. | Object |

Opções de configuração para prop Config:

| Opção | Descrição | Tipo | Valor padrão | |---|---|---|---| | statusAccordion 0.0.4 | Define o estado inicial do accordion. | Boolean | false | | speedTransition 0.0.4 | Define a velocidade da animação exibir/esconder do accordion em segundos. | Number | 0.3 | | effectTransition 0.0.4 | Define a função de transição da animação. | String | ease | | disableToggle 0.0.4 | Para desativar/ativar o método exibir/esconder do accordion. | Boolean | false |

Slots

| Slot | Descrição | Name | Exemplo de uso | |---|---|---|---| | Topo do accordion 0.0.4 | Slot para inserção do topo região onde é clicavel para o exibir/esconder o conteudo. | accordionTopo | <accordion><template #accordionTopo><div><h3>{{ categoriaInstitucional.label }}</h3><img src="" alt="Icone seta para baixo" loading="lazy" width="" height=""></div></template></accordion> | | Conteudo do accordion 0.0.4 | Slot para inserção do conteudo que será exibido/escodido pelo accordion. | accordionConteudo | <accordion><template #accordionConteudo><div><p>Meu conteudo</p></div></template></accordion> |

Eventos

| Evento | Descrição | Argumentos | |---|---|---| | beforeToggle 0.0.4 | Evento antes da mudança exibir/esconder. | currentStatus Descrição: Estado antes da execução exibir/esconder Tipo: Boolean newStatus Descrição: Estado depois da execução exibir/esconder Tipo: Boolean | | afterToggle 0.0.4 | Evento depois da mudança exibir/esconder. | status Descrição: Estado depois da execução exibir/esconder Tipo: Boolean | | loadAccordion 0.0.4 | Evento da primeira inicialização do accordion. | element Descrição: Referencia do accordion Tipo: HTMLDivElement |

Estilização

Para a estilização, basta inserir os estilos sem escopos no componente pai ou em um arquivo CSS separado dentro de static/css/packages-styles/ com o nome do mesmo como nome do arquivo, utilizando sempre de um ID ou classe específica na tag do componente inserido para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivo CSS separado. Para estilos em arquivos separados, utilizar o import no componente pai do componente correspondente ao estilo.