Pagination

Uso

page empieza en 1. Proporciona total y pageSize, acepta pageChange y utiliza esos valores para cargar o recortar los datos. pageSizeOptions añade un selector opcional. Acepta pageSizeChange y pageChange: al cambiar la cantidad se propone una página que mantiene visible el primer registro. maxVisible limita el tramo numerado; las colecciones largas conservan primera y última página con puntos suspensivos.

Ejemplos

Prueba el comportamiento y abre Código para consultar la implementación.

Prueba y configura

Cambia las opciones y prueba el resultado. El template generado sigue tu configuración; Código contiene la implementación ejecutable completa.

<neu-pagination
  [page]="page()"
  [total]="84"
  [pageSize]="pageSize()"
  [maxVisible]="5"
  [pageSizeOptions]="[5,10,20]"
  pageSizeAriaLabel="Elementos por página"
  (pageChange)="page.set($event)"
  (pageSizeChange)="changeSize($event)"
/>

import { signal } from '@angular/core';

export const page = signal(1);

export const pageSize = signal(10);

Datos y contenido

pageChange y pageSizeChange son propuestas, no cargan datos. Mantén una única página y cantidad aplicadas en la aplicación. Pagination no modifica ni consulta tus registros.

Accesibilidad y teclado

Pagination es una zona de navegación con nombre accesible. La página actual usa aria-current="page". Anterior y siguiente se deshabilitan en los extremos. El selector opcional tiene su propio nombre accesible. Los botones admiten Tab, Intro y Espacio.

API

Inputs y Outputs corresponden al paquete fijado. Los tipos con nombre enlazan a sus definiciones; cada Template disponible tiene un ejemplo ejecutable.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Estilos y tokens

Utiliza tokens públicos de espaciado, superficie, texto y foco. Comprueba el contenido proyectado y los controles en ambos temas y con anchos reducidos.

Componentes relacionados

Combina estos componentes para construir la interfaz del entorno.

• Table
• Tabs