Pagination

A pagination component for navigating through pages of content.

Basic Usage

Default Pagination

Basic pagination with page numbers.

<ae-pagination total="100" page="1" per-page="10"></ae-pagination>

Different Pages

Current Page

Show different current page states.

<div class="demo-column">
<ae-pagination total="100" page="1" per-page="10"></ae-pagination>
<ae-pagination total="100" page="5" per-page="10"></ae-pagination>
<ae-pagination total="100" page="10" per-page="10"></ae-pagination>
</div>

Sibling Count

Control visible page numbers around current page.

<div class="demo-column">
<ae-pagination total="200" page="10" per-page="10" sibling-count="1"></ae-pagination>
<ae-pagination total="200" page="10" per-page="10" sibling-count="2"></ae-pagination>
</div>

With Boundaries

Boundary Count

Show pages at the boundaries.

<ae-pagination total="200" page="10" per-page="10" boundary-count="2"></ae-pagination>

Simple Mode

Simple Pagination

Compact pagination with just prev/next.

<ae-pagination total="50" page="3" per-page="10" simple></ae-pagination>

pnpm add @aetherui-kit/core

npm install @aetherui-kit/core

Import

import { defineAePagination } from '@aetherui-kit/core/pagination';
defineAePagination();

Props

Name	Type	Default	Description
`total`	`number`	`0`	Total items
`page`	`number`	`1`	Current page
`per-page`	`number`	`10`	Items per page
`sibling-count`	`number`	`1`	Pages shown around current
`boundary-count`	`number`	`1`	Pages shown at boundaries
`simple`	`boolean`	`false`	Simple prev/next mode
`disabled`	`boolean`	`false`	Disabled state

Events

Name	Detail	Description
`ae-pagination-change`	`{ page: number }`	Fired when page changes

CSS Parts

Name	Description
`base`	Container
`button`	Page buttons
`button--current`	Current page button
`button--prev`	Previous button
`button--next`	Next button
`ellipsis`	Ellipsis indicator

Accessibility

Uses role="navigation" with aria-label
Current page marked with aria-current="page"
Disabled buttons have aria-disabled