...
Vamos a ver como se usa cada uno de los componentes.
...
| Code Block |
|---|
|
<desy-pagination ...></desy-pagination> |
...
| Expand |
|---|
| title | Propiedades de entrada |
|---|
|
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 tiene objeto previoel botón de anterior esta activado o no | | hasNext | boolean | Si tiene objeto siguientepreviousTextel 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 previoprimera | | nextTextlastText | string | Texto que se muestra en el botón siguienteú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. |
| Expand |
|---|
|
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. |
|
| Expand |
|---|
|
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 |
|---|
|
 | Code Block |
|---|
| <desy-pagination
[itemsPerPage]="10" [totalItems]="59" idPrefix="simple" [(currentPage)]="2">
</desy-pagination> |
| Code Block |
|---|
| <desy-pagination
[itemsPerPage]="10" [totalItems]="64" [hasSelect]="true" [hasNext]="true" [hasPrevious]="true" [idPrefix]="'selector'" previousText="Anterior" nextText="Siguiente" [(currentPage)]="3" >
</desy-pagination> |
 Image Added Image Added
| Code Block |
|---|
| <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>
|
| Code Block |
|---|
<desy-pagination [hasSelectItemsPerPagehs
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> |
|
...