Paginação Moderna

Sobre

Componente usado para a paginação de uma listagem de produtos, contém próximo, anterior, primeira página e ultima página fixados.

Dependências

• prod

  • Descrição: Dados do produto (suporta somente a estrutura de dados recebida da API da Wap.store).

  • Tipo: Object

Instalação

• Instale o app através do seu terminal

npm i @wapstore/paginacao-morderna

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

"dependencies": {
  "@wapstore/paginacao-morderna": "^0.0.4"
}

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

Uso

O componente de Paginação Moderna 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 paginação de busca e departamento:

<template>
  
</template>
<script>
  ...
</script>
<style>
  ...
</style>

Recursos

Props

| Prop | Descrição | Tipo | |---|---|---| | currentPage 0.0.4 | Página atual da listagem (parseInt(this.$route.query.page). | - | | productTotal 0.0.4 | Total de produtos (nas listagens, response.data.info.total). | Number | | productPerPage 0.0.4 | Limite de produtos por página (nas listagens, response.data.info.limit). | Number | | range 0.0.4 | Quantidade de elementos da paginação visivel desconsiderando as arrows. O range deve ser um número impar para garantir o balanceamento. | Number |

Slots

| Slot | Descrição | Name | Exemplo | |---|---|---|---| | Ícone primeira página 0.0.4 | Campo para inserção do ícone do botão de primeira página. | iconePrimeiraPagina | <paginacao><template #iconePrimeiraPagina>/*...*/</template></paginacao> | | Ícone página anterior 0.0.4 | Campo para inserção do ícone do botão de página anterior. | iconePaginaAnterior | <paginacao><template #iconePaginaAnterior>/*...*/</template></paginacao> | | Ícone próxima página 0.0.4 | Campo para inserção do ícone do botão de próxima página. | iconeProximaPagina | <paginacao><template #iconeProximaPagina>/*...*/</template></paginacao> | | Ícone última página 0.0.4 | Campo para inserção do ícone do botão de última página. | iconeUltimaPagina | <paginacao><template #iconeUltimaPagina>/*...*/</template></paginacao> | | Ícone de primeira página extra 0.0.4 | Campo para inserção de um ícone extra, esse icone por padrão não possui eventos. | iconePaginaDecoracaoFirst | <paginacao><template #iconePaginaDecoracaoFirst>/*...*/</template></paginacao> | | Ícone de primeira página extra 0.0.4 | Campo para inserção de um ícone extra, esse icone por padrão não possui eventos. | iconePaginaDecoracaoLast | <paginacao><template #iconePaginaDecoracaoLast>/*...*/</template></paginacao> |

Eventos

| Evento | Descrição | Argumentos | |---|---|---| | changePage 0.0.4 | Uma função de callback que é chamada em toda alteração de página. | currentPagina Descrição: Número da página atual. Tipo: Number | | initPagination 0.0.4 | Primeira renderização do componente no DOM. | element Descrição: Referencia do HTML do slide da vitrine no DOM. Tipo: HTMLDivElement | | updatePagination 0.0.4 | Toda atualização do componente no DOM. | element Descrição: Referencia do HTML do slide da vitrine no DOM. Tipo: HTMLDivElement |

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.