busca v1.0.0
Busca
Sobre
Um componente padrão para busca com container de sugestão de busca. Este componente possui recurso de preenchimento da pesquisa por microfone, porém é necessário configurar essa opção via prop, alguns navegadores pode não suportar esse recurso. Garanta também que as permissoes estão ativas, acesso por http é bloqueado o recurso de microfone pelos navegadores.
Dependências
Store
| Prop | Descrição | Tipo | Uso |
|---|---|---|---|
screenWidth 1.2.0 | 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 |
Instalação
- Instale o app através do seu terminal
npm install @wapstore/busca- Valide se seu arquivo package.json possui a dependência
"dependencies": {
"@wapstore/busca": "^1.2.0"
}Agora a loja está apta para o uso da aplicação.
Uso
Para seu perfeito funcionamento, este componente contém um módulo próprio na $store que deve ser vinculado a mesma, para isso basta inserir o trecho a seguir no arquivo index.js da pasta store.
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 uma Newsletter na Home:
<template>
<busca id="searchTopo" textPlaceholder="Buscar aqui..." :sugestoes="true" :limit="6">
<template #contentBtBusca>
<img src="~/static/img/header/search.svg" width="18px" height="18px" alt="Buscar">
</template>
</busca>
</template>
<script>
import busca from '@wapstore/busca/store/busca.module.js';
export const modules = {
busca
};
</script>
<style>
...
</style>Recursos
Props
| Prop | Descrição | Tipo | Valor padrão |
|---|---|---|---|
closeOnMobile 1.2.0 | Ativa/desativa a ocultação da busca no mobile. | Boolean | true |
sugestoes 1.2.0 | Ativa/desativa o box de sugestões. | Boolean | false |
textPlaceholder 1.2.0 | Texto da barra de pesquisa. | String | Texto da barra de pesquisa |
sugestoesDefaultBusca 1.2.0 | Array que recebe dados de produto para exibir nas sugestões quando não houver nada no box de pesquisa. | Array | - |
limit 1.2.0 | Limite de itens que a sugestão terá. | Number | 5 |
Slots
| Slot | Descrição | Name | Exemplo de uso |
|---|---|---|---|
Botão de busca 1.2.0 | Slot para alteração do conteúdo do botão de busca. | contentBtBusca | <busca><template #contentBtBusca><span>Buscar</span><img src="icone.png" alt="Busca"></template></busca> |
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.
1 year ago