desy-angular v11.1 - Manual de integración DesyPaginationModule
Servicios Digitales de Aragón
Componentes relativos a paginación
Vamos a ver como se usa cada uno de los componentes.
Pagination
<desy-pagination ...></desy-pagination>Proporciona un listado de paginas en las que puedes navegar.
Propiedad | Tipo | Descripción | Obligatorio |
|---|
Propiedad | Tipo | Descripción | Obligatorio |
|---|---|---|---|
id | string | Identificador del elemento <pagination> |
|
idPrefix | string | Prefijo de id |
|
classes | string | Clases CSS separadas por espacio que se aplicarán sobre el elemento <pagination> |
|
hasSelect | boolean | Cuando es true se mostrarán en forma de seleccion, si no se mostrará una lista sin select. |
|
classesContainer | string | Contenedor de clases que quieres mostrar en el componente pagination |
|
totalItems | number | Número total de objetos |
|
itemsPerPage | number | Número total de objetos por página |
|
hasPrevious | boolean | Si el botón de anterior esta activado o no |
|
hasNext | boolean | Si el botón de siguiente esta activado o no |
|
hasFirst | boolean | Si el botón de primera esta activado o no |
|
hasLast | boolean | Si el botón de última esta activado o no |
|
showPrevious | boolean | Si el botón de anterior se muestra o no |
|
showNext | boolean | Si el botón de siguiente se muestra o no |
|
showFirst | boolean | Si el botón de primera se muestra o no |
|
showLast | boolean | Si el botón de anterior se muestra o no |
|
previousText | string | Si el botón de última esta activado o no |
|
nextText | string | Texto que se muestra en el botón siguiente |
|
firstText | string | Texto que se muestra en el botón primera |
|
lastText | string | Texto que se muestra en el botón última |
|
hasSelectItemsPerPage | boolean | Indica si hay un selector (listbox) para seleccionar el número de elementos a mostrar por página |
|
Propiedades de accesibilidad
El componente y cada DreadcrumbsData admiten los siguientes parámetros de accesibilidad.
Evento | Tipo | Descripción |
|---|
Evento | Tipo | Descripción |
|---|---|---|
itemsPerPageChange | number | Número de elementos por página que el usuario elige que haya en la misma a través del selector. |
Se permite proyectar contenido dentro de pagination para facilitar su uso. Admite los siguientes componentes:
PaginationListboxLabel
<desy-pagination-listbox-label>...</desy-pagination-listbox-label>
Permite especificar la etiqueta a mostrar en el listbox, requiere la propiedad hasSelectItemsPerPage a true. Si no se específica texto, por defecto mostrará: “Items por página”.
Propiedad | Tipo | Descripción | Obligatorio |
|---|
Propiedad | Tipo | Descripción | Obligatorio |
|---|---|---|---|
classes | string | Clases CSS separadas por espacio que se aplicarán sobre el componente. |
|
PaginationListboxLabel
<desy-pagination-item-perpage>...</desy-pagination-item-perpage>
Permite especificar los elementos seleccionables en el listbox, requiere la propiedad hasSelectItemsPerPage a true.
Propiedad | Tipo | Descripción | Obligatorio |
|---|
Propiedad | Tipo | Descripción | Obligatorio |
|---|---|---|---|
value | number | Indica el valor que va a tener el elemento del listbox y así actualizar el número de elementos por página. |
|
Implementación listado
<desy-pagination
[itemsPerPage]="10" [totalItems]="59" idPrefix="simple" [(currentPage)]="2">
</desy-pagination>
Implementación listado con select
<desy-pagination
[itemsPerPage]="10" [totalItems]="64" [hasSelect]="true" [hasNext]="true" [hasPrevious]="true" [idPrefix]="'selector'" previousText="Anterior" nextText="Siguiente" [(currentPage)]="3" >
</desy-pagination>
Implementación listado con select
Implementación listado con selector de elementos por página