Pagination
O componente Pagination nos permite navegar entre uma lista muito grande de entradas.
import React from "react";
import { Pagination } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Pagination activePage={2} onPageChange={(page) => page} pageCount={20} />
);
export default Example;O componente é composto por um seletor com números opcionais e setas.
Utilizamos o componente quando temos uma lista de entradas muito grande, para navegar dentro do mesmo contexto, permitindo o acesso rápido entre a primeira ou última página da lista, além de dar visibilidade da quantidade total de páginas existentes.
No desktop o seu uso é recomendado em páginas com um número de entradas elevado, onde a navegação vertical se torna muito densa e difícil.
É recomendado que seu uso no mobile seja evitado, nesse caso é preferível usar o InfinteScroll, que nos permite carregar conteúdos sob demanda conforme o usuário atinge ao final da página, tornando a navegação mais fluída e ininterrupta. Para o caso dessa alternativa for tecnicamente inviável ou o número de entradas for muito grande, podemos utilizar o pagination, porém o componente deve respeitar a largura mínima de resolução de 360 pixels.
O uso dos numeradores é opcional, em contextos onde não temos espaço suficiente e o número de páginas não é tão grande, podemos utilizar apenas as setas para navegar entre páginas.
- Navegar em uma lista de vendas
- Navegar em uma lista de produtos
- Navegar em uma lista de contatos
Instale o componente via terminal.
npm install @nimbus-ds/paginationAdditional props are passed to the <Pagination> element. See div docs for a list of props accepted by the <Pagination> element.