A Vue component for create a tiny pagination 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.jsDocumentation
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
