vue-plain-pagination

    0.3.0 • Public • Published

    vue-plain-pagination

    NPM version

    A simple pagination component for Vue.

    Online demo: JSFiddle (used styles from Bootstrap 4)

    Dependencies

    • Vue.js 2 - progressive JavaScript framework

    Installation

    via Yarn

    yarn add vue-plain-pagination

    via NPM

    npm install vue-plain-pagination

    via CDN

    <script src="//unpkg.com/vue-plain-pagination@0.2.1"></script>

    Usage

    Basic

    after Yarn/NPM installation

    <template>
      <div>
        <p>Current page: {{ currentPage }}</p>
        <v-pagination v-model="currentPage" :page-count="30"></v-pagination>
      </div>
    </template>
     
    <script>
    import vPagination from 'vue-plain-pagination'
     
    export default {
      components: { vPagination },
      data() {
        return {
          currentPage: 1
        }
      }
    }
    </script>

    via CDN

    <!doctype html>
    <html lang="en">
    <head>
        <title>vue-plain-pagination</title>
    </head>
    <body>
    <div id="app">
        <p>page: {{ currentPage }}</p>
        <v-pagination v-model="currentPage" :page-count="total"></v-pagination>
    </div>
     
    <script src="//unpkg.com/vue"></script>
    <script src="//unpkg.com/vue-plain-pagination"></script>
    <script>
      Vue.component('v-pagination', window['vue-plain-pagination'])
     
      new Vue({
        el: '#app',
        data: {
          currentPage: 5,
          total: 9,
        },
      })
    </script> 
    </body>
    </html>

    Customization

    Using classes and labels you can change default CSS class names of every HTML tag of pagination and anchor from first/prev/next/last buttons.

    <template>
      <div>
        <p>Current page: {{ currentPage }}</p>
        <v-pagination v-model="currentPage"
                      :page-count="totalPages"
                      :classes="bootstrapPaginationClasses"
                      :labels="paginationAnchorTexts"></v-pagination>
      </div>
    </template>
     
    <script>
    import vPagination from 'vue-plain-pagination'
     
    export default {
      components: { vPagination },
      data() {
        return {
          currentPage: 1,
          totalPages: 30,
          bootstrapPaginationClasses: {
            ul: 'pagination',
            li: 'page-item',
            liActive: 'active',
            liDisable: 'disabled',
            button: 'page-link'  
          },
          paginationAnchorTexts: {
            first: 'First',
            prev: 'Previous',
            next: 'Next',
            last: 'Last'
          }
        }
      }
    }
    </script>

    demo: JSFiddle

    Properties

    name type required
    v-model Number yes Current page.
    page-count Number yes Number of pages.
    classes Object no Class names of used HTML tag.
    labels Object no HTML/text of prev/next button.

    Default value of classes:

    {
       ul: 'pagination',
       li: 'pagination-item',
       liActive: 'pagination-item--active',
       liDisable: 'pagination-item--disable',
       button: 'pagination-link',
       buttonActive: 'pagination-link--active',
       buttonDisable: 'pagination-link--disable'
    }
    

    Default value of labels:

    {
       first: '&laquo;',
       prev: '&lsaquo;',
       next: '&rsaquo;',
       last: '&raquo;'
    }
    

    Contributing

    Files structure is generated by Vue CLI 3 (babel, eslint).

    via Yarn

    # install dependencies
    yarn install
     
    # compiles and hot-reloads for development
    yarn run serve
     
    # compiles bundle for production
    yarn run build-lib
     
    # lints and fixes files
    yarn run lint
     

    via NPM

    # install dependencies
    npm install
     
    # compiles and hot-reloads for development
    npm run serve
     
    # compiles bundle for production
    npm run build-lib
     
    # lints and fixes files
    npm run lint
     

    License

    Code released under the MIT license.

    Install

    npm i vue-plain-pagination

    DownloadsWeekly Downloads

    1,203

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    284 kB

    Total Files

    14

    Last publish

    Collaborators

    • cichy380