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

Events

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

← Progress →