Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Current »

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.

 Propiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador del elemento <pagination>

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 tiene objeto previo

hasNext

boolean

Si tiene objeto siguiente

previousText

string

Texto que se muestra en el botón previo

nextText

string

Texto que se muestra en el botón siguiente

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.

 Eventos de salida

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.

 Contenido

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

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

value

number

Indica el valor que va a tener el elemento del listbox y así actualizar el número de elementos por página.

 Ejemplos
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 selector de elementos por página
<desy-pagination [hasSelectItemsPerPage]="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>

  • No labels