tailable-pagination
11,523
9
| Install | |
|---|---|
npm install tailable-pagination |
|
| Latest Version: | 2.0.0 |
| Vue: | 2 |
| Last Updated: | Jul 19, 2023 |
| Links: | GitHub · npm |
Maintainer: jamesdordoy
Tailable Pagination
A Vue.js pagination component for Laravel thats built for Tailwind.
Requirements
- Vue.js 2.x
- Laravel 5.x +
- Tailwindcss 2.x
Demo & Docs
See https://tailable.github.io/pagination/
Component Installation
npm install tailable-pagination
or
yarn add tailable-pagination
Register the Plugin
import TailablePagination from 'tailable-pagination';
Vue.use(TailablePagination);
Add the following variants to your tailwind.config.js
variants: {
opacity: ['disabled'],
cursor: ['disabled'],
},
Basic Example
Pagination.vue
<tailable-pagination
:data="users"
:showNumbers="true">
</tailable-pagination>
export default {
data() {
return {
users: {},
}
},
created() {
axios.get("http://laravel.test/api/users")
.then(response => {
this.users = response.data;
})
}
}
API
Pagination Props
| Name | Type | Default | Description |
|---|---|---|---|
data |
Object | {} | The data from paginated AJAX request |
limit |
Number | 1 | The pagination limit each side of the middle button. |
size |
String | "default" | (optional) Must be default or small or large |
show-disabled |
Boolean | true | (optional) Pagination buttons next and previous, do you want them displayed if there is nothing to click? |
show-numbers |
Boolean | false | (optional) Pagination show numbered buttons? |
hide-when-empty |
Boolean | false | (optional) Hides the pagination buttons when there is no need to show them |
translate |
Object | { nextButton: 'Next' previousButton: 'Previous' } | (optional) Translate button text |
Pagination Events
| Name | Description |
|---|---|
page-changed |
A button has been clicked |
Development
To work on the package locally or to add to the documentation, run the following command:
npm run serve
To run the tests:
npm run test:unit
Related Packages
@iankibetsh/sh-tailwind
Vue 3 + Tailwind CSS v4 component library for Laravel backends, built on @iankib...
3,215
0
@elyracode/stack-vilt
Elyra stack profile for VILT (Vue 3, Inertia.js, Laravel, Tailwind CSS)
17,982
@vue-interface/middleware
An extensible Middleware component for VueRouter that closely mimic's Laravel's...
1,267
1
Version History
| Version | Released | License |
|---|---|---|
| 2.0.0 | ||
| 1.0.0 | ||
| 0.1.22 | ||
| 0.1.21 | ||
| 0.1.20 | ||
| 0.1.19 | ||
| 0.1.18 | ||
| 0.1.17 | ||
| 0.1.16 | ||
| 0.1.15 | ||
| 0.1.14 | ||
| 0.1.13 | ||
| 0.1.12 | ||
| 0.1.11 | ||
| 0.1.10 | ||
| 0.1.9 |