0.2.1 • Published 6 years ago
vue-bulma-paginate v0.2.1
vue-bulma-paginate
Install via NPM:
npm < 5.0:
npm install vue-bulma-paginate --save
npm >= 5.0:
npm install vue-bulma-paginateUsage
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,
}
...
<Pagination
:itemsTotal="pagination.itemsTotal"
:itemsPerPage="pagination.perPage"
:currentPage="pagination.currentPage"
:buttonsMax="5"
:url="this.$route.name"
:queryParameter="images-set"
:nextText="Next set"
:previousText="Previous set"
:goToText="Go to the images set"
:pageText="Images set"
/>A full example is provided at the Demo.