# 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'
1

Global usage

Vue.component(Pagination.name, Pagination)
1

For local usage

export default {
  components: {
    [Pagination.name]: Pagination
  }
}
1
2
3
4
5

# Simple pagination with v-model

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

<script>
  export default {
    data () {
        return {
          defaultPagination: 1
        }
      }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# Customizing prev and next buttons

<template>
   <n-pagination :page-count="10" v-model="defaultPagination">
    <span slot="prev">Previous</span>
    <span slot="next">Next</span>
   </n-pagination>
</template>

<script>
  export default {
    data () {
        return {
          defaultPagination: 1
        }
      }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Alignment

Change the alignment of pagination components with flexbox utilities.

<template>
   <n-pagination class="justify-content-center" :page-count="10" v-model="defaultPagination"></n-pagination>
</template>

<script>
  export default {
    data () {
        return {
          defaultPagination: 1
        }
      }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
   <n-pagination class="justify-content-end" :page-count="10" v-model="defaultPagination"></n-pagination>
</template>

<script>
  export default {
    data () {
        return {
          defaultPagination: 1
        }
      }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# Colors

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

<script>
  export default {
    data () {
        return {
          defaultPagination: 1
        }
      }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Pagination Props

# Events

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

← Popovers →