vue-plain-pagination
A simple pagination component for Vue.
Online demo: JSFiddle (used styles from Bootstrap 4)
Dependencies
- Vue.js 2 - progressive JavaScript framework
Installation
via Yarn
yarn add vue-plain-pagination
via NPM
npm install vue-plain-pagination
via CDN
Usage
Basic
after Yarn/NPM installation
<template> <div> <p>Current page: {{ currentPage }}</p> <v-pagination v-model="currentPage" :page-count="30"></v-pagination> </div></template> <script>import vPagination from 'vue-plain-pagination' export default { components: { vPagination }, data() { return { currentPage: 1 } }}</script>
via CDN
vue-plain-pagination page: {{ currentPage }}
Customization
Using classes
and labels
you can change default CSS class names of every HTML tag of pagination and anchor from
first/prev/next/last buttons.
<template> <div> <p>Current page: {{ currentPage }}</p> <v-pagination v-model="currentPage" :page-count="totalPages" :classes="bootstrapPaginationClasses" :labels="paginationAnchorTexts"></v-pagination> </div></template> <script>import vPagination from 'vue-plain-pagination' export default { components: { vPagination }, data() { return { currentPage: 1, totalPages: 30, bootstrapPaginationClasses: { ul: 'pagination', li: 'page-item', liActive: 'active', liDisable: 'disabled', button: 'page-link' }, paginationAnchorTexts: { first: 'First', prev: 'Previous', next: 'Next', last: 'Last' } } }}</script>
demo: JSFiddle
Properties
name | type | required | |
---|---|---|---|
v-model |
Number | yes | Current page. |
page-count |
Number | yes | Number of pages. |
classes |
Object | no | Class names of used HTML tag. |
labels |
Object | no | HTML/text of prev/next button. |
Default value of classes
:
{
ul: 'pagination',
li: 'pagination-item',
liActive: 'pagination-item--active',
liDisable: 'pagination-item--disable',
button: 'pagination-link',
buttonActive: 'pagination-link--active',
buttonDisable: 'pagination-link--disable'
}
Default value of labels
:
{
first: '«',
prev: '‹',
next: '›',
last: '»'
}
Contributing
Files structure is generated by Vue CLI 3 (babel, eslint).
via Yarn
# install dependenciesyarn install# compiles and hot-reloads for developmentyarn run serve# compiles bundle for productionyarn run build-lib# lints and fixes filesyarn run lint
via NPM
# install dependenciesnpm install# compiles and hot-reloads for developmentnpm run serve# compiles bundle for productionnpm run build-lib# lints and fixes filesnpm run lint
License
Code released under the MIT license.