- Notifications
You must be signed in to change notification settings - Fork3
A Vue component for create a tiny pagination with Flexbox
License
NotificationsYou must be signed in to change notification settings
coderdiaz/vue-tiny-pagination
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A Vue component for create a tiny paginate with Flexbox
# Install with npm$ npm i -S vue-tiny-pagination# or yarn$ yarn add vue-tiny-pagination
<divid="app"><tiny-pagination:total="currentTotal"@tiny:change-page="changePage"/></div>
You can useLocal Registration:
import{TinyPagination}from'vue-tiny-pagination';newVue({el:'#app',data(){return{currentTotal:100,currentPage:1,};},methods:{changePage(pagination){this.currentPage=pagination.page;},},components:{ TinyPagination,},});
orGlobal Registration:
importTinyPaginationfrom'vue-tiny-pagination';Vue.use(TinyPagination);// or with a custom component nameimport{TinyPagination}from'vue-tiny-pagination';Vue.component('custom-name',TinyPagination);
In browser you can use Unpkg, Jsdelivr, CDN.js, etc.
# Unpkghttps://unpkg.com/vue-tiny-pagination@latest/dist/vue-tiny-pagination.js# JSDelivrhttps://cdn.jsdelivr.net/npm/vue-tiny-pagination@latest/dist/vue-tiny-pagination.min.js
| 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 |
| Event | Description |
|---|---|
| tiny:change-page | Get the current page from paginationpayload: { page: 1 } |
| tiny:change-limit | Get the current limit from paginationpayload: { limit: 1 } |
All feedback and suggestions are welcome!
This is a open-source software licensed under theMIT license
About
A Vue component for create a tiny pagination with Flexbox
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.