Pagination

The Pagination component provides a customizable navigation interface for paginated content. It supports first/last, previous/next buttons, and page number display with ellipsis for large page ranges.

Installation

npm install @duskmoon-dev/el-pagination

Usage

import '@duskmoon-dev/el-pagination/register';

<el-dm-pagination total="10" current="1"></el-dm-pagination>

Live Demo

Properties

Sizes

<el-dm-pagination total="10" size="xs"></el-dm-pagination>
<el-dm-pagination total="10" size="sm"></el-dm-pagination>
<el-dm-pagination total="10" size="md"></el-dm-pagination>
<el-dm-pagination total="10" size="lg"></el-dm-pagination>

Colors

<el-dm-pagination total="10" color="primary"></el-dm-pagination>
<el-dm-pagination total="10" color="secondary"></el-dm-pagination>
<el-dm-pagination total="10" color="neutral"></el-dm-pagination>

Siblings and Boundaries

Control how many page numbers are displayed:

<!-- Show 2 pages around current page, 1 at boundaries -->
<el-dm-pagination total="100" current="50" siblings="2" boundaries="1"></el-dm-pagination>

<!-- Show 3 pages around current page, 2 at boundaries -->
<el-dm-pagination total="100" current="50" siblings="3" boundaries="2"></el-dm-pagination>

Events

Event Handling

const pagination = document.querySelector('el-dm-pagination');
pagination.addEventListener('change', (e) => {
  console.log('Page changed to:', e.detail.page);
  // Fetch data for the new page
  fetchPageData(e.detail.page);
});

CSS Parts

Styling with CSS Parts

el-dm-pagination::part(button) {
  border-radius: 50%;
}

el-dm-pagination::part(page) {
  font-weight: bold;
}

el-dm-pagination::part(ellipsis) {
  color: #999;
}

Keyboard Navigation

Accessibility

• Uses role="navigation" with aria-label="Pagination"
• Page buttons include aria-label for screen readers
• Current page is indicated with aria-current="page"
• Disabled navigation buttons have proper disabled state