Pagination

Este componente permite a los usuarios navegar por el contenido mostrado página por página, por ejemplo, en tablas.

IMG - 8.png

Cuándo usar

Cuándo usar

  • En todos los casos con visualización paginada.
  • Para permitir al usuario saltar varias páginas o ir directamente a la página deseada.
  • Para permitir al usuario personalizar el número de filas mostradas.
  • Para fijar el tamaño de las secciones dentro de una página de modo que la carga automática de contenido en la parte superior no desplace el contenido inferior.

3.png

🚫 Cuándo evitar

Cuando necesite una transición fluida entre páginas de resultados de búsqueda, use carga automática o carga mediante un botón, a menos que esto ralentice la página.

2.png

1.png

Estructura

IMG - 18.png

  1. Página actual. Muestra el número de serie de la página mostrada.
  2. Página anterior. Abre la página anterior.
  3. Página siguiente. Abre la página siguiente.
  4. Última página de contenido. Aparece si se conoce el contenido total y puede dividirse en páginas de inmediato. Abre la última página con un clic.
  5. Icono de desbordamiento. Aparece si el número de páginas excede cuatro.
  6. Interruptores adelante/atrás. Cambian las páginas una por una.
  7. Ir a la primera página. Abre la primera página de contenido.
  8. Ir a una página específica. Abre la página especificada cuando el usuario ingresa el número de página y presiona Enter.
  9. Número de elementos por página. Un interruptor para el número de elementos mostrados en una página.

No tiene que usar todos los elementos de la estructura juntos. Puede encontrar las configuraciones disponibles en "Modificaciones".

Tamaños

Por defecto, el tamaño de los botones, input y select en el paginador es M.

Frame 2087326211.png

Estados

IMG - 19.png

Primera página muestra la primera página.

Segunda/siguiente página muestra la segunda y siguientes páginas.

Última página muestra la última página.

Modificaciones

IMG - 20.png

  1. Opciones de tamaño de página y mostrar input: Puede deshabilitar estos campos si el usuario no puede ir a una página específica o controlar la cantidad de contenido mostrado en la página.
  2. Total desconocido solo muestra la página actual. Use cuando se desconoce el número total de elementos
  3. Ocultar páginas asegura el cambio de página sin números de serie. Use cuando la lista de elementos es dinámica y el número de páginas, así como el número de serie, cambiará constantemente y confundirá al usuario.
  4. Compacto es un formato compacto sin texto. Use cuando el espacio de la interfaz es limitado (por ejemplo, en cuadros de diálogo)

Para interfaces de dispositivos móviles, puede usar la versión móvil del paginador.

IMG - 23.png

AnteriorCargador
PróximaPopover