menu-navegacao v1.0.2
Menu Navegação
Sobre
Componente base para um menu de navegação de 3 níveis, indicado principalmente para criação de menus principais de navegação do site (os que ficam no cabeçalho).
Dependências
Store
Prop | Descrição | Tipo | Uso |
---|---|---|---|
screenWidth 1.1.3 | Variável encontrada no módulo principal da $store , responsável por conter o valor atualizado da largura da tela. | Variável da $store . | $store.state.screenWidth |
toggleMenu 1.1.3 | Mutation contida no módulo de menu , que, pertence ao de cabecalho , com a função de alterar o valor da variável, existente no mesmo módulo, menuOpen , responsável por abrir ou fechar o menu. | Mutation. | $store.commit('cabecalho/menu/toggleMenu') |
menuOpen 1.1.3 | Variável responsável pela abertura/fechamento do menu principal. | Variável da $store . | $store.state.cabecalho.menu.menuOpen |
tipoImg 1.1.3 | Variável que contém o resultado da validação de dispositivo, assim fazendo com que em ambientes Mac o site use jpg/png e em outros ambientes, webp. | Variável da $store . | $store.state.tipoImg |
menuData 1.1.3 | Variável que contém os dados do menu principal. | Variável da $store . | $store.state.cabecalho.menu.menuData |
Instalação
- Instale o app através do seu terminal
npm install @wapstore/menu-navegacao
- Valide se seu arquivo package.json possui a dependência
"dependencies": {
"@wapstore/menu-navegacao": "^1.1.3"
}
Agora a loja está apta para o uso da aplicação.
Uso
O componente de Menu Navegação 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 Menu institucional no rodapé:
<template>
<menu-navegacao :key="$route.fullPath">
<template #logo>
<img
src="~/static/img/geral/logo.png"
alt="Logo Loja"
:width="90"
:height="33"
>
</template>
<template #arrow>
<img src="~/static/img/geral/arrow.svg" alt="" width="5px" height="8px">
</template>
</menu-navegacao>
</template>
<script>
import MenuNavegacao from '@wapstore/menu-navegacao';
export default {
components: {
MenuNavegacao
},
async fetch () {
// Request do menu
await this.$axios.request({
method: 'get',
url: '/v2/front/struct/menus/menu-principal'
}).then(response => {
this.$store.commit('cabecalho/menu/setMenu', response.data);
}).catch(response => {
console.error(response.response.data);
});
}
};
</script>
<style>
...
</style>
Recursos
Props
Prop | Descrição | Tipo | Valor padrão |
---|---|---|---|
enableClose 1.1.3 | Ativa/desativa o botão fechar do menu mobile. | Boolean | true |
bannerSize 1.1.3 | Define tamanho dos banners do menu desktop (caso haja). | Object | { height: 400, width: 200 } |
menuDropDown 1.1.3 | Ativa/desativa o formato de menu dropdown. | Boolean | false |
Slots
Slot | Descrição | Name | Exemplo de uso |
---|---|---|---|
Logo 1.1.3 | Slot para inserção da logo no topo do menu mobile. | logo | <menu-navegacao><template #logo><img src="logo.png" alt="Logo"></template></menu-navegacao> |
Botão fechar 1.1.3 | Slot para alteração do ícone do botão de fechar do menu. | closeMenuBtIcon | <menu-navegacao><template #closeMenuBtIcon><img src="icone.png" alt="icone"></template></menu-navegacao> |
Arrow dos itens do menu 1.1.3 | Ícone de flecha para os itens do menu mobile. | arrow | <menu-navegacao><template #arrow><img src="arrow.png" alt="arrow"></template></menu-navegacao> |
Área do usuário mobile 1.1.3 | Slot para personalização da área do usuário no mobile. | areaUserMobile | <menu-navegacao><template #areaUserMobile>/*...*/</template></menu-navegacao> |
Label do botão voltar nível 2 1.1.3 | Use esse slot para alterar o texto dentro do botão voltar presente no nível 2 do mobile. | labelBotaoVoltarTwo | <menu-navegacao><template #labelBotaoVoltarTwo="{ data }">{{ data.parent.label }}</template></menu-navegacao> |
Label do botão voltar nível 3 1.1.3 | Use esse slot para alterar o texto dentro do botão voltar presente no nível 3 do mobile. | labelBotaoVoltarThree | <menu-navegacao><template #labelBotaoVoltarThree="{ data }">{{ data.parent.label }}</template></menu-navegacao> |
Elemento extra 1.1.3 | Use esse slot para adicionar uma estrutura extra no final do menu mobile. | extra | <menu-navegacao><template #extra>{{ data.parent.label }}</template></menu-navegacao> |
Slot | Props do slot | Descrição | Tipo |
---|---|---|---|
Label do botão voltar nível 2 1.1.3 | data | Informação do elemento pai refente ao menu atual. | Object |
Label do botão voltar nível 3 1.1.3 | data | Informação do elemento pai refente ao menu atual. | Object |
Eventos
Evento | Descrição | Argumentos |
---|---|---|
hoverItemDesktop 1.1.3 | Evento emitido quando acontece o mouseover e o mouseleave no item nível do menu desktop. | status: Descrição: Se for o evento mouseover é passado no argumento true, se for o evento mouselave é passado false. Tipo: Boolean . |
beforeChangeSubmenuMobile 1.1.3 | Evento emitido antes da troca de subnível do menu mobile. | nivelTo: Descrição: Nível para qual o usuário vai navegar. Tipo: Number . nivelFrom: Descrição: Nível que o usuário esta saindo. Tipo: Number |
afterChangeSubmenuMobile 1.1.3 | Evento emitido depois da troca de subnível do menu mobile. | currentNivel: Descrição: Atual nível, apos troca de subnível. Tipo: Number . |
Estilização
Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, 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 arquivos CSS separado.
Classes CSS
- Navegação pelos subníveis do menu mobile
- Descrição: Se você procura uma forma de estilizar o menu quando navegado para um certo subnível do menu.
- Classes
- menuPrincipal-subNiveis
- Descrição: Essa classe é exibida quando um subnível diferente do nível zero está ativo.
- menuPrincipal-currentNivel-{atualNivel}
- Descrição: Essa classe é alterada conforme o nível atual do usuário, {atualNivelMenuMob} é a representação de um número, vai de 1 a nível 3. Exemplo: menuPrincipal-currentNivel-2.
- menuPrincipal-subNiveis