# 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
```
## Usage
### Basic
#### after Yarn/NPM installation
```vue
Current page: {{ currentPage }}
```
#### via CDN
```html
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.
```vue
Current page: {{ currentPage }}
```
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