vue-plain-pagination
Version:
Pagination component for Vue.js 2
211 lines (165 loc) • 4.07 kB
Markdown
# vue-plain-pagination
[![NPM version][npm-image]][npm-url]
A simple pagination component for [Vue](https://vuejs.org/).
Online demo: [JSFiddle](https://jsfiddle.net/cichy380/b2w8e0kx/)
(used styles from [Bootstrap 4](http://getbootstrap.com/docs/4.1/components/pagination/))
## Dependencies
* [Vue.js 2](https://vuejs.org/) - progressive JavaScript framework
## Installation
#### via Yarn
```bash
yarn add vue-plain-pagination
```
#### via NPM
```bash
npm install vue-plain-pagination
```
#### via CDN
```html
<script src="//unpkg.com/vue-plain-pagination@0.2.1"></script>
```
## Usage
### Basic
#### after Yarn/NPM installation
```vue
<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
```html
<!doctype html>
<html lang="en">
<head>
<title>vue-plain-pagination</title>
</head>
<body>
<div id="app">
<p>page: {{ currentPage }}</p>
<v-pagination v-model="currentPage" :page-count="total"></v-pagination>
</div>
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vue-plain-pagination"></script>
<script>
Vue.component('v-pagination', window['vue-plain-pagination'])
new Vue({
el: '#app',
data: {
currentPage: 5,
total: 9,
},
})
</script>
</body>
</html>
```
### 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.
```vue
<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](https://jsfiddle.net/cichy380/b2w8e0kx/)
## 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](https://cli.vuejs.org/) ([babel](https://babeljs.io/), [eslint](https://eslint.org/)).
#### via Yarn
``` bash
# install dependencies
yarn install
# compiles and hot-reloads for development
yarn run serve
# compiles bundle for production
yarn run build-lib
# lints and fixes files
yarn run lint
```
#### via NPM
``` bash
# install dependencies
npm install
# compiles and hot-reloads for development
npm run serve
# compiles bundle for production
npm run build-lib
# lints and fixes files
npm run lint
```
## License
Code released under the [MIT license](LICENSE.md).
[npm-image]: https://img.shields.io/npm/v/vue-plain-pagination.svg?style=flat-square
[npm-url]: https://npmjs.org/package/vue-plain-pagination