vue-bulma-pagination

1.2.0 • Public • Published

Pagination

Pagination component for Vue Bulma.

Installation

$ npm install vue-bulma-pagination --save
# or 
$ yarn add vue-bulma-pagination --save

Examples

<template>
  <div>
    <pagination :urlPrefix="'/'" :currentPage="2" :lastPage="100" />
  </div>
</template>
 
<script>
import Pagination from 'vue-bulma-pagination/src/Pagination'
 
export default {
  components: {
    Pagination
  }
}
</script>

Document

props required default optional desc
urlPrefix false '/' urlPrefix for vue-router
urlBuilder false urlBuilder 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:

<template>
  <div class="container">
    <pagination :urlBuilder="urlBuilder" :currentPage="2" :lastPage="100" />
  </div>
</template>
 
<script>
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
    }
  }
}
</script>

Badges


Package Sidebar

Install

npm i vue-bulma-pagination

Weekly Downloads

27

Version

1.2.0

License

MIT

Last publish

Collaborators

  • netpi