Pagination

Pagination moves through a list or table. The active page is a solid brand fill with brand-on text, the same language as a primary Button. In Chinese this component is 分頁器, so it does not share the Tabs name 分頁.

Demos

Basic

Inactive pages are transparent and pick up an 18% brand wash on hover. The current page uses aria-current="page".

<gk-pagination page-count="5"></gk-pagination>

Many pages

Ellipsis keeps the first page, the last page, and the pages around the current one. The total reads from item-count. The size picker and quick jumper match the control height.

<gk-pagination
  page="5"
  item-count="128"
  page-size="10"
  show-total
  show-size-picker
  show-quick-jumper
></gk-pagination>

Sizes

sm / md / lg are 28 / 34 / 40, the same scale as Button.

<gk-pagination size="sm" page-count="3"></gk-pagination>
<gk-pagination size="md" page="2" page-count="3"></gk-pagination>
<gk-pagination size="lg" page="3" page-count="3"></gk-pagination>

Disabled

disabled mutes the bar and sets aria-disabled. End buttons are also disabled when there is no previous or next page.

<gk-pagination page-count="2" disabled></gk-pagination>

Controlled

update:page and change carry { page }. update:page-size carries { pageSize } and the page resets to 1. Arrow keys move the page when focus is on a page button.

Page 5, 10 / page

<gk-pagination
  :page="page"
  :page-size="pageSize"
  item-count="128"
  show-size-picker
  show-quick-jumper
  @update:page="onPage"
  @update:page-size="onSize"
></gk-pagination>

API

Pagination Props

Prop	Type	Default
page	number	1
page-size	number	10
item-count	number	—
page-count	number	—
page-sizes	number[]	[10, 20, 30, 50]
show-size-picker	boolean	false
show-quick-jumper	boolean	false
show-total	boolean	false
size	'sm' | 'md' | 'lg'	'md'
disabled	boolean	false
page-slot	number	7

When item-count is set, the page count is ceil(item-count / page-size). Otherwise page-count is used. page is clamped to 1…pageCount. page-sizes accepts a comma list or a JSON array.

Pagination Events

Event	Detail
update:page	{ page: number }
change	{ page: number }
update:page-size	{ pageSize: number }

Changing the page size resets the page to 1 and emits update:page when the page actually changes.

CSS Parts

Part	Description
root	nav landmark
nav	Page button group
item / item-active	Numbered page
prev / next	Chevron buttons
ellipsis	Static …
size-picker	Page-size select
quick-jumper	Go-to field
total	Total text

Accessibility

• The landmark label follows the document language: “Pagination” or 「分頁器」. Set aria-label on the host to override it.
• The active page has aria-current="page".
• Previous / next are labeled. Disabled controls set aria-disabled="true".
• The quick jumper input has its own label.