Description:
An accessible (ARIA-friendly) pagination component for Vue.js application to paginate any content with a fancy pagination experience.
How to use it:
1. Import the vue-sliding-pagination component in your app.
import SlidingPagination from 'vue-sliding-pagination'
2. Add the pagination component to the template as follows:
<template> <sliding-pagination :current="current" :total="total" @page-change="onPageChange" > </sliding-pagination> </template>
export default { name: 'SimpleExample', components: { SlidingPagination }, data() { return { current: 1, total: 10 } }, methods: { onPageChange (page) { this.current = page } } }
3. Default props to config the pagination controls.
ariaPaginationLabel: { type: String, required: false, default: 'Pagination Navigation' }, ariaGotoPageLabel: { type: String, required: false, default: 'Go to page %page% of %total%' }, ariaPreviousPageLabel: { type: String, required: false, default: 'Go to previous page' }, ariaNextPageLabel: { type: String, required: false, default: 'Go to next page' }, ariaCurrentPageLabel: { type: String, required: false, default: 'Page %page% of %total%, current page' }, classMap: { type: Object, required: false, default: () => { return defaultClassMap } }, current: { required: true, type: Number }, total: { required: true, type: Number }, slidingEndingSize: { required: false, type: Number, default: 2 }, slidingWindowSize: { required: false, type: Number, default: 3 }, nonSlidingSize: { required: false, type: Number, default: 9 }, pageComponent: { required: false, type: String, default: 'sliding-pagination-default-page' }
Preview:
Changelog:
v1.3.2 (10/09/2021)
- Dependency updates
v1.3.1 (06/02/2021)
- Fix page navigation via next and previous
v1.3.0 (05/01/2021)
- Converted the components to use render functions
- Increased test coverage
- Fixed slot replacement for gaps and page navigation
- Dependency upgrades
v1.2.0 (02/28/2021)
- Get page from event payload on page click
v1.1.2 (12/03/2020)
- Dependency upgrades
v1.1.1 (12/03/2020)
- Fix webpack build
v1.1.0 (09/06/2020)
- Bugfix
Download Details:
Author: eFrane
Live Demo: https://vue-sliding-pagination.efrane.com/examples.html#very-basic-example
Download Link: https://github.com/eFrane/vue-sliding-pagination/archive/master.zip
Official Website: https://github.com/eFrane/vue-sliding-pagination
Install & Download:
# Yarn
$ yarn add vue-sliding-pagination
# NPM
$ npm install vue-sliding-pagination --save