accordion-wap v1.0.2
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.