...
Vamos a ver como se usa cada uno de los componentes.
...
| Code Block |
|---|
|
<desy-pagination ...></desy-pagination> |
Proporciona un listado de paginas en las que puedes navegar.
...
| Expand |
|---|
| title | 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 |
|
...
| 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
...
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 Modified
| 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>
|
|