Tiny Pagination Component For Vue.js
A Vue component to create a tiny and customizable pagination for long web content.
<vue-tiny-pagination />
A Vue component for create a tiny pagination with Flexbox
Install/Usage
$ npm i -S vue-tiny-pagination
<div id="#app">
<tiny-pagination
:total="currentTotal"
@tiny:change-page="changePage"></tiny-pagination>
</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)
Usage in browser
In browser you can use Unpkg:
https://unpkg.com/[email protected]/dist/vue-tiny-pagination.min.js
Example in browser here: https://jsfiddle.net/coderdiaz/g5vLex83/3/
Documentation
For see the complete documentation go to the official website.
Donate
Development
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build docs with minification
npm run compile:docs
# build project
npm run build
# run tests
npm run test
What's Included
-
npm run dev
: Webpack +vue-loader
with proper config for source maps & hot-reload. -
npm run build
: build with HTML/CSS/JS minification.
For detailed explanation on how things work, consult the docs for vue-loader. Also check out the breaking changes in [email protected].
Contributions
All contributions are welcome send your PR and Issues.
License
This is a open-source software licensed under the MIT license
Crafted by Javier Diaz
Github Repository
Tags: #VueJs