Pagination
<gstock-pagination>
|
GstockPagination
API
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
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
|
|
infoPosition
info-position
|
The position of the page info text when showInfo is true. |
'top' | 'bottom' | 'left' | 'right'
|
'left'
|
|
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
|
variant
|
The variant of the pagination buttons. |
|
'outlined' | 'plain' | 'solid'
|
'plain'
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties .
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
gstock-page-change-event
|
onGstockPageChangeEvent
|
Emitted when the current page changes. | - |
Learn more about events .
CSS Parts
| Name | Description |
|---|---|
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. |
Learn more about CSS parts .