Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/coderdiaz/vue-tiny-pagination
A Vue component for create a tiny pagination with Flexbox
https://github.com/coderdiaz/vue-tiny-pagination
es6 paginate pagination tiny-pagination vue vue-component vuejs
Last synced: about 2 months ago
JSON representation
A Vue component for create a tiny pagination with Flexbox
- Host: GitHub
- URL: https://github.com/coderdiaz/vue-tiny-pagination
- Owner: coderdiaz
- License: mit
- Created: 2018-02-10T21:23:22.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-08T04:49:30.000Z (over 4 years ago)
- Last Synced: 2024-04-14T13:48:19.668Z (2 months ago)
- Topics: es6, paginate, pagination, tiny-pagination, vue, vue-component, vuejs
- Language: JavaScript
- Homepage:
- Size: 968 KB
- Stars: 20
- Watchers: 5
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Lists
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (Components & Libraries / UI Utilities)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (Components & Libraries / UI Utilities)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (Components & Libraries / UI Utilities)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (Components & Libraries / UI Utilities)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (Components & Libraries / UI Utilities)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (Components & Libraries / UI Utilities)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (Components & Libraries / UI Utilities)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (Components & Libraries / UI Utilities)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (Components & Libraries / UI Utilities)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination with Flexbox ` 📝 a year ago` (UI Utilities [🔝](#readme))
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (UI Utilities / Pagination)
- awesome-vue - vue-tiny-pagination ★17 - A Vue component for create a tiny pagination. (UI Utilities / Pagination)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (UI Utilities / Pagination)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (UI Utilities / Pagination)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (UI Utilities / Pagination)
- awesome-vue - vue-tiny-pagination - A Vue component for create a tiny pagination. (Components & Libraries / UI Utilities)
README
# [Tiny Pagination](https://github.com/coderdiaz/vue-tiny-pagination) · [](http://npmjs.com/package/vue-tiny-pagination) [](https://github.com/coderdiaz/vue-tiny-pagination/stargazers) [](https://travis-ci.org/coderdiaz/vue-tiny-pagination) [](https://npmjs.com/package/vue-tiny-pagination)
A Vue component for create a tiny paginate with Flexbox
## Install/Usage
```sh
# Install with npm
$ npm i -S vue-tiny-pagination
# or yarn
$ yarn add vue-tiny-pagination
```
```html
```
You can use **Local Registration**:
```js
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**:
```js
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.
```sh
# 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](https://raw.githubusercontent.com/coderdiaz/vue-tiny-pagination/master/LICENSE)