Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
maxLevel2
minLevel2

...

Vamos a ver como se usa cada uno de los componentes.

Pagination

...

Code Block
languagexml
<desy-pagination ...></desy-pagination>

...

Expand
titleContenido

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.

Expand
titleEjemplos
Image RemovedImage Added
Implementación listado
Code Block
languagexml
<desy-pagination 
  [itemsPerPage]="10" [totalItems]="59" idPrefix="simple" [(currentPage)]="2">
</desy-pagination>

Image RemovedImage Added

Implementación listado con select
Code Block
languagexml
<desy-pagination 
  [itemsPerPage]="10" [totalItems]="64" [hasSelect]="true" [hasNext]="true" [hasPrevious]="true" [idPrefix]="'selector'" previousText="Anterior" nextText="Siguiente" [(currentPage)]="3" >
</desy-pagination>

Image RemovedImage Added

Implementación listado con selector de elementos por página
Code Block
<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>

...