Skip to main content

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. Reflects '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. Reflects boolean false
variant The variant of the pagination buttons. Reflects '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. -

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.

Aprende más sobre partes CSS .