GitHub - coderdiaz/vue-tiny-pagination: A Vue component for create a tiny pagination with Flexbox (original) (raw)

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

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