Pagination
<gstock-pagination>
|
GstockPagination
API
Propiedades
| Nombre | Descripción | Reflects | Tipo | Por defecto |
|---|---|---|---|---|
currentPage
current-page
|
The current page number (1-based). |
number
|
1
|
|
totalPages
total-pages
|
The total number of pages. |
number
|
1
|
|
totalItems
total-items
|
The total number of items. |
number
|
0
|
|
pageSize
page-size
|
Number of items per page. |
number
|
10
|
|
size
|
The pagination size variant. |
|
'small' | 'medium' | 'large'
|
'medium'
|
showInfo
show-info
|
When true, shows page info (e.g., “Showing 1–10 of 100 items”). |
boolean
|
false
|
|
showFirstLast
show-first-last
|
When true, shows first/last page buttons. |
boolean
|
false
|
|
maxPages
max-pages
|
Maximum number of page buttons to show (excluding prev/next/first/last). |
number
|
5
|
|
disabled
|
When true, the pagination is disabled. |
|
boolean
|
false
|
showPageSizeSelector
show-page-size-selector
|
When true, shows the page size selector. |
boolean
|
false
|
|
pageSizeOptions
page-size-options
|
Available page size options for the selector. |
array
|
[5, 10, 20, 50]
|
|
variant
|
The variant of the pagination buttons. |
|
'outlined' | 'plain' | 'solid'
|
'plain'
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Aprende más sobre atributos y propiedades .
Eventos
| Nombre | React Event | Descripción | Event Detail |
|---|---|---|---|
gstock-page-change-event
|
onGstockPageChangeEvent
|
Emitted when the current page changes. | - |
gstock-page-size-change-event
|
onGstockPageSizeChangeEvent
|
Emitted when the page size changes. | - |
Aprende más sobre eventos .
Partes
| Nombre | Descripción |
|---|---|
base
|
The component’s base wrapper. |
content
|
The content wrapper that contains nav and info. |
nav
|
The navigation wrapper. |
list
|
The page list wrapper. |
page
|
Individual page buttons. |
prev
|
Previous page button. |
next
|
Next page button. |
first
|
First page button. |
last
|
Last page button. |
ellipsis
|
Ellipsis indicator. |
info
|
Page info text. |
page-size-selector
|
The page size selector wrapper. |
page-size-select
|
The page size select dropdown. |
Aprende más sobre partes CSS .