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 {BasePagination} from '@/components'

Global usage

Vue.component(BasePagination.name, BasePagination)

For local usage

export default {
  components: {
    BasePagination
  }
}

Simple pagination with v-model

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

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

Colors

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

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

Pagination Props

Events

Name Description Params
input triggers when the binding value changes (default for v-model) the updated value

← Progress →