0.3.6 • Published 4 years ago
vue-tiny-pagination v0.3.6
Tiny Pagination ·
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
0.3.6
4 years ago
0.3.5
5 years ago
0.3.4
5 years ago
0.3.3
5 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.2
6 years ago
0.2.1
6 years ago
0.2.1-beta.9
6 years ago
0.2.1-beta.8
6 years ago
0.2.1-beta.7
6 years ago
0.2.1-beta.6
6 years ago
0.2.1-beta.4
6 years ago
0.2.1-beta.3
6 years ago
0.2.1-beta.2
6 years ago
0.2.1-beta.1
6 years ago
0.2.0
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago