Accessible Pagination Component – vue-sliding-pagination

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.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

You Might Be Interested In: