🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Paginate Al is a simple yet highly customizable pagination component for Vue.js component.

Pagination

Documentation

Demo

Click here.

Install via NPM

    npm install --save vue-paginate-al

Register as Plugin

    import Vue from 'vue'     import VuePaginateAl from 'vue-paginate-al'      Vue.component('vue-paginate-al', VuePaginateAl)

Usage

    <template>         <div>             // example 1             <vue-paginate-al :totalPage="10" @btnClick="goToFunction"></vue-paginate-al>              // example 2 => with background color             <vue-paginate-al :totalPage="15" activeBGColor="success" :withNextPrev="false"></vue-paginate-al>              // example 3 => with single data             <vue-paginate-al :totalPage="20" :myData="'myname'" @btnClick="goToFuncWithData"></vue-paginate-al>              // example 4 => with multiple data             <vue-paginate-al :totalPage="20" :myData="['myname', 'myemail']" @btnClick="goToFuncWithMultipleData"></vue-paginate-al>         </div>     </template>      <script>         import VuePaginateAl from 'vue-paginate-al'          export default {             name: 'App',             components: {                 VuePaginateAl             },             methods : {                 goToFunction : function(n)                 {                     console.log(n);                 },                  goToFuncWithData : function(n, data)                 {                     console.log(n, data);                 },                  goToFuncWithMultipleData : function(n, data)                 {                     console.log(n, data[0], data[1]);                 }             }         }     </script>

Props

Props Description Type Required Example
totalPage Total paginate Number true 10
currentPage Current page Number false 2
myData For callback data without process String false 'myname'
withNextPrev To show or hide button next/prev Boolean false true
nextText Text for button Next String false 'Next'
prevText Text for button Prev String false 'Prev'
activeBGColor Background color String false 'primary'
customActiveBGColor Background color custom String false '#bb06a9'

You May Also Like