Pagination

We took the Bootstrap pagination elements and customised them to fit the overall theme. Besides the classic look, we also added the colour classes to offer more customisation.

To use the custom radio buttons you need to import the custom made component: 
import {Pagination} from 'src/components'

Global usage

Vue.component(Pagination.name, Pagination)

For local usage

export default {
  components: {
    [Pagination.name]: Pagination
  }
}

Simple pagination with v-model

<template>
   <p-pagination :page-count="10" v-model="defaultPagination"></p-pagination>
</template>

<script>
  export default {
    data () {
        return {
          defaultPagination: 1
        }
      }
  }
</script>

Colors

<template>
<div>
  <p-pagination type="danger" :page-count="10" v-model="defaultPagination"></p-pagination>
  <p-pagination type="success" :page-count="10" v-model="defaultPagination"></p-pagination>
  <p-pagination type="info" :page-count="10" v-model="defaultPagination"></p-pagination>
  <p-pagination type="warning" :page-count="10" v-model="defaultPagination"></p-pagination>
</div>
</template>

<script>
  export default {
    data () {
        return {
          defaultPagination: 1
        }
      }
  }
</script>

Pagination Props

Prop NameTypeDefaultDescription
type String default Pagination type (primary|info|danger|default|warning|success)
pageCount Number N/A Pagination page count. This should be specified in combination with perPage
perPage Number 10 Pagination per page. Should be specified with total or pageCount
total Number N/A Can be specified instead of pageCount. The page count in this case will be total/perPage
value Number 1 Pagination value

Events

Event NameDescriptionParameters
inputtriggers when the binding value changes (default for v-model)the updated value

← Progress →