Vue Component Library

Appearance

Pagination Component ​

A flexible and accessible pagination component for navigating through large datasets with customizable navigation controls.

Overview ​

The Pagination component provides:

  • First/Previous/Next/Last navigation buttons
  • Configurable page number display with ellipsis
  • Multiple size variants and color themes
  • Full keyboard navigation support
  • Customizable navigation controls via slots
  • Responsive design with smooth animations

When to Use ​

Use the Pagination component when you need to:

  • Navigate through large lists of data
  • Display search results across multiple pages
  • Provide table pagination controls
  • Create content pagination for articles or posts
  • Build data grid navigation

Key Features ​

  • Navigation Controls: First, Previous, Next, and Last page buttons
  • Smart Page Display: Intelligent ellipsis placement for large page counts
  • Customizable Appearance: Multiple sizes, colors, and rounded variants
  • Accessibility: Full ARIA support and keyboard navigation
  • Flexible Slots: Customize any navigation element with slots
  • Event Handling: Comprehensive event system for page changes
  • Responsive Design: Adapts to different screen sizes

Basic Usage ​

vue
<template>
  <OPagination
    v-model="currentPage"
    :total-pages="totalPages"
    @update:model-value="handlePageChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const currentPage = ref(1)
const totalPages = ref(10)

const handlePageChange = (page) => {
  console.log('Page changed to:', page)
}
</script>

API Reference →

View Code →