Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vue-bulma/pagination
https://github.com/vue-bulma/pagination
bulma pagination vue vue-component vue-components
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/vue-bulma/pagination
- Owner: vue-bulma
- Created: 2017-03-03T08:49:58.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-15T02:09:45.000Z (over 7 years ago)
- Last Synced: 2024-10-21T23:05:19.677Z (2 months ago)
- Topics: bulma, pagination, vue, vue-component, vue-components
- Language: Vue
- Size: 18.6 KB
- Stars: 13
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pagination
Pagination component for Vue Bulma.
## Installation
```sh
$ npm install vue-bulma-pagination --save
# or
$ yarn add vue-bulma-pagination --save
```
## Examples
```vue
import Pagination from 'vue-bulma-pagination/src/Pagination'
export default {
components: {
Pagination
}
}
```
## Document
| props | required | default | optional | desc |
| ----------- | -------- | --------------------------| --------------------------- | -------------------------------- |
| urlPrefix | `false` | '/' | | urlPrefix for vue-router |
| urlBuilder | `false` | [urlBuilder](#urlbuilderpagenum) | | urlBuilder result will passed to vue-router link `to` prop |
| currentPage | `true` | 1 | | |
| lastPage | `true` | | | the last page number |
| displayPage | `false` | 4 | | page number will to be displayed |
| modifiers | `false` | '' | '','is-centered','is-right' | |
| prev | `false` | 'Prev' | | text of `prev` button |
| next | `false` | 'Next' | | text of `next` button |
### urlBuilder(pageNum)
Returned value will be passed to `router-link` as `:to` prop. See example below:
```vue
import Pagination from 'vue-bulma-pagination/src/Pagination'
export default {
components: {
Pagination
},
methods: {
urlBuilder (page) {
return { query: { ...this.$route.query, page } } // Changing page in location query
}
}
}
```
## Badges
---