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
<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);
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.jsName 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 pagination
payload: { page: 1 } tiny:change-limit Get the current limit from pagination payload: { limit: 1 }
All feedback and suggestions are welcome!
This is a open-source software licensed under the MIT license
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4