Pagination Bar ​

Displays a pagination control for navigating through pages of content.

When to Use

• to divide a long list into several pages, indicating other pages exist and allowing the user to access them.

Usage ​

import { PaginationBar } from '@youcan/alto';

<PaginationBar
  :current="currentPage"   
  :size="TOTAL_PAGES"
  :count="PER_PAGE"
  :total="TOTAL"
  @update:current="handlePaginationNavigation"
/>

API Reference ​

Examples ​

Per Page ​

Allows users to select the number of items displayed per page from a dropdown.

Custom labels ​

Displays a pagination bar with custom labels for previous, next, and per-page elements.