itens-por-pagina v1.0.0
Itens por página
Sobre
Componente usado para a limitar os produtos da listagem.
Dependências
prod
Descrição: Dados do produto (suporta somente a estrutura de dados recebida da API da Wap.store).
Tipo:
Object
Props
| Prop | Descrição | Tipo |
|---|---|---|
limits 1.0.2 | Lista de limits, disponibilizado pela api de settings. | Array |
infoPage 1.0.2 | Informações da página vinda da API normalmente encontrado em response.data.info, utilizado pelo componente para calcular a página atual no qual será redirecionado após a aplicação do filtro de itens por página, uma vez que quando aplicado a quantidade de páginas pode ser reduzida. | Object |
Plugins
| Prop | Descrição | Métodos utilizados pelo componente |
|---|---|---|
listagem 1.0.2 | Plugin com métodos úteis para listagens de produto. | calcQtdPages: Método responsável por calcular a quantidade de páginas usando a quantidade de itens por página e a quantidade total de produtos que a listagem possui. |
Instalação
- Instale o app através do seu terminal
npm install @wapstore/itens-por-pagina- Valide se seu arquivo package.json possui a dependência
"dependencies": {
"@wapstore/itens-por-pagina": "^1.0.2"
}Agora a loja está apta para o uso da aplicação.
Uso
O componente de Paginação pode ser inserido em qualquer lugar da pasta "components". 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 a quantidade de itens no departamento:
<template v-if="pageData && pageData.conteudo && pageData.conteudo.categoria">
<itens-por-pagina
v-if="config"
:limits="limits"
:limitsDefault="limitDefault"
:infoPage="pageData.info"
>
<template #titulo>
Mostrar
</template>
</itens-por-pagina>
</template>
<style>
...
</style>Recursos
Props
| Prop | Descrição | Tipo | Valor padrão |
|---|---|---|---|
limitDefault 1.0.2 | Limite default para itens da listagem. | Number | 12 |
Slots
| Slot | Descrição | Name | Exemplo |
|---|---|---|---|
Título 1.0.2 | Campo para inserção do texto do label do select. | titulo | <limit-itens><template v-slot:titulo>Itens por página:</template></limit-itens> |
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.
1 year ago