desy-angular v11.0 - Manual de integración DesyPaginationModule

Owned by Servicios Digitales de Aragón
Last updated: 23 Jan 2024
3 min read

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>

 

Vista desktop
Vista mobile

 

Implementación listado con select
<desy-pagination [id]="'withSelector'" [itemsPerPage]="10" [totalItems]="64" [hasSelect]="true" [hasNext]="true" [hasPrevious]="true" [showFirst]="true" [showLast]="true" [idPrefix]="'selector'" previousText="Anterior" nextText="Siguiente" firstText="Primera" lastText="Última" [(currentPage)]="selectedPage" ></desy-pagination>

 

Implementación listado con selector de elementos por página
<desy-pagination [hs SelectItemsPerPage]="true"> <desy-pagination-listbox-label>Items por página</desy-pagination-listbox-label> <desy-pagination-item-perpage [value]="25">25</desy-pagination-item-perpage> <desy-pagination-item-perpage [value]="50">50</desy-pagination-item-perpage> <desy-pagination-item-perpage [value]="100">100</desy-pagination-item-perpage> </desy-pagination>