vue-tiny-pagination

    0.3.6 • Public • Published

    Tiny Pagination · NPMVERSION GITHUBSTARS BUILD DOWNLOADS

    A Vue component for create a tiny paginate with Flexbox

    Install/Usage

    # Install with npm 
    $ npm i -S vue-tiny-pagination
     
    # or yarn 
    $ yarn add vue-tiny-pagination
    <div id="app">
      <tiny-pagination
        :total="currentTotal"
        @tiny:change-page="changePage" />
    </div>

    You can use Local Registration:

    import { TinyPagination } from 'vue-tiny-pagination';
    new Vue({
      el: '#app',
      data() {
        return {
          currentTotal: 100,
          currentPage: 1,
        };
      },
      methods: {
        changePage (pagination) {
          this.currentPage = pagination.page;
        },
      },
      components: {
        TinyPagination,
      },
    });

    or Global Registration:

    import TinyPagination from 'vue-tiny-pagination';
    Vue.use(TinyPagination);
     
    // or with a custom component name
    import { TinyPagination } from 'vue-tiny-pagination';
    Vue.component('custom-name', TinyPagination);

    Usage in browser

    In browser you can use Unpkg, Jsdelivr, CDN.js, etc.

    # Unpkg 
    https://unpkg.com/vue-tiny-pagination@latest/dist/vue-tiny-pagination.js
     
    # JSDelivr 
    https://cdn.jsdelivr.net/npm/vue-tiny-pagination@latest/dist/vue-tiny-pagination.min.js

    Documentation

    Props

    Name Description Type Default Required
    total A number of total items Number - true
    page Prop to set a default page Number 1 false
    lang Default language to show (Available: en, es) String en false
    customClass Prop to set a custom class. String "" false
    limits Prop to set a default limits to page sizes. Array [10, 15, 20,50,100] false
    showLimit Prop to disable the limit selector Boolean true false

    Events

    Event Description
    tiny:change-page Get the current page from pagination payload: { page: 1 }
    tiny:change-limit Get the current limit from pagination payload: { limit: 1 }

    Community

    All feedback and suggestions are welcome!

    License

    This is a open-source software licensed under the MIT license

    Install

    npm i vue-tiny-pagination

    DownloadsWeekly Downloads

    6

    Version

    0.3.6

    License

    MIT

    Unpacked Size

    46.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • coderdiazeng