https://github.com/jgrandar/vue-bulma-paginate
Simple Vue component for Bulma CSS pagination.
https://github.com/jgrandar/vue-bulma-paginate
bulma pagination vue
Last synced: about 1 month ago
JSON representation
Simple Vue component for Bulma CSS pagination.
- Host: GitHub
- URL: https://github.com/jgrandar/vue-bulma-paginate
- Owner: jgrandar
- Created: 2018-08-21T00:03:03.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-05T21:06:29.000Z (over 6 years ago)
- Last Synced: 2025-02-15T01:20:01.170Z (3 months ago)
- Topics: bulma, pagination, vue
- Language: Vue
- Homepage: https://jgrandar.github.io/vue-bulma-paginate
- Size: 561 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-bulma-paginate
## Install via NPM:
```
npm < 5.0:
npm install vue-bulma-paginate --save
npm >= 5.0:
npm install vue-bulma-paginate
```
## Usage
**Props**
|Prop|Type|Required|Default|Description|
|----|----|--------|-------|-----------|
|itemsTotal|Number|True|0|Elements to paginate|
|itemsPerPage|Number|True|1|Elements per page|
|currentPage|Number|True|1|Current page|
|url|String|True||Vue Router named route|
|buttonsMax|Number|False|7|Maximum number of buttons to show including first and last page (must be odd)|
|queryParameter|String|False|page|Custom query parameter (e.g., example.com/gallery?**images-set**=2)|
|nextText|String|False|Next|Custom text for next button|
|previousText|String|False|Previous|Custom text for previous button|
|goToText|String|False|Goto page|Custom text for aria-label attribute on "a" tags|
|pageText|String|False|Page|Custom text for aria-label attribute on current page "a" tag|
## Example
```
import Pagination from 'vue-bulma-paginate';
...
components: {
Pagination,
}
...
```
A full example is provided at the [Demo](https://jgrandar.github.io/vue-bulma-paginate/).