Pagination

Pagination is a sequence of numbers assigned to pages. It helps split up large content into shorter, easier and more breathable pages.

Default

The pagination component consists of several elements, all of which are optional. So with no extra class, your pagination links will look as follow :

<template>
  <div>
    <vs-pagination :total="40" v-model="currentx"></vs-pagination>
  </div>
</template>
<script>
export default {
  data: () => ({
    currentx: 14
  })
}
</script>

Icons

To customize the previous and next page icons change the value of the prev-icon and prev-icon directives. By default, their values are respectively arrow_back and arrow_forward.

::: tip Vuesax uses the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page (opens new window).

FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.

:::

<template>
  <div>
    <vs-pagination :total="100" v-model="currentx" prev-icon="arrow_back" next-icon="arrow_forward"></vs-pagination>
  </div>
</template>
<script>
export default {
  data: () => ({
    currentx: 64
  })
}
</script>

Limit the amount of links shown

By default Vuesax will show a maximum of 9 links. This default behaviour can be changed by setting the max directive to a different integer value.

::: tip The amount given to the max directive should take into account the first and last pages plus the ellipses "..." :::

::: warning Setting the max directive to a value lesser then 5 when the total is greater then that will result in the pagination only showing the previous/next buttons as well as the first and last links. :::

<template>
  <div>
    <vs-pagination :total="30" v-model="currentx" :max="13"></vs-pagination>
  </div>
</template>
<script>
export default {
  data: () => ({
    currentx: 17
  })
}
</script>

Goto

The goto directive will allow users to directly jump to a desired page.

::: tip If the value given is lower than 1 it will jump to page 1. However if the value is greater than total it will jump to the last page. :::

<template>
  <div>
    <vs-pagination :total="20" v-model="currentx" goto ></vs-pagination>
  </div>
</template>
<script>
export default {
  data: () => ({
    currentx: 8
  })
}
</script>

Colors

You can change the color of the component with the property color, you can use the Main colors or RGB and HEX colors

:::warning Only RGB and HEX colors are supported. :::

<template lang="html">
  <div class="centerx">
    <input class="input-color" v-model="colorx" type="color">
    <vs-pagination :color="colorx" :total="20" v-model="currentx"></vs-pagination>
  </div>
</template>

<script>
export default {
  data: ()=>({
    colorx: '#f91f43',
    currentx: 7
  })
}
</script>

<style lang="stylus">
.input-color
  margin-right 5px
</style>

Programmatic Inc/Dec

You can also update page number from outside of pagination component.

Current: 5

<template>
  <div>
    <p>Current: {{ currentx }}</p>
    <vs-button @click="currentx++">Increment</vs-button>
    <vs-button @click="currentx--">Decrement</vs-button>
    <br><br>
    <vs-pagination :total="20" v-model="currentx"></vs-pagination>
  </div>
</template>
<script>
export default {
  data: () => ({
    currentx: 5
  })
}
</script>