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