Skip to content

A Vue component for create a tiny pagination with Flexbox

License

Notifications You must be signed in to change notification settings

coderdiaz/vue-tiny-pagination

Repository files navigation

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