Pagination
El componente Pagination nos permite navegar entre una lista muy 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;El componente se compone de un selector con números opcionales y flechas.
Utilizamos el componente cuando tenemos una lista de entradas muy grande, para navegar dentro del mismo contexto, permitiendo el acceso rápido a la primera y última página de la lista, además de dar visibilidad de la cantidad total de páginas existente.
En desktop su uso es recomendado para páginas con un número grande de entradas, donde la navegación vertical se vuelve muy pesada y difícil.
Se recomienda evitar su uso en mobile. Dado el caso, es preferible usar scroll infinito, que nos permite cargar contenido a demanda a medida que la persona usuaria se acerca al final de la página. Esto permite que la navegación sea más fluida e ininterrumpida. En el caso que esa alternativa fuera técnicamente inviable o el número de entradas fuera demasiado grande, podemos usar el Pagination. Asimismo, debemos respetar el ancho mínimo de resolución de 360 píxeles.
El uso de la numeración es opcional. En contextos donde no tenemos suficiente espacio y el número de páginas no es tan alto, podemos usar solamente las flechas para navegar entre páginas.
- Navegar en una lista de ventas
- Navegar en una lista de productos
- Navegar en una lista de contactos
Instalá el 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.