22This package provides ready to use pagination components using tailwindcss, with multiple theme according to your taste.
33
44
5- for example instead of :
5+ For example *** instead of*** :
66``` php
77{{ $users->links() }}
88```
99
10- you may use :
11- ``` php
10+ You may use :
11+ ``` html
1212<x-paginate :elems =" $users" />
1313```
1414
15- and it previews with default theme :
15+ And it previews with *** default*** theme :
1616
1717<img src =" /screens/light.png " alt =" light theme " width =" " />
1818
19- but you can *** change*** themes and more settings.
19+ But you can ** change** ** themes** and more ** settings** read [ Usage ] ( #usage ) .
2020
2121<br />
2222
@@ -27,28 +27,31 @@ but you can ***change*** themes and more settings.
2727
2828
2929## Prerequisites
30+
3031** Tailwindcss** installed, ** Laravel 8** , ** PHP 8**
3132
3233
3334## Installation
34- ``` php
35+
36+ ``` bash
3537composer require amir-hossein5/laravel-components
3638```
3739
38- ``` php
40+ ``` bash
3941php artisan laravel-components:install
4042```
4143
4244And you may run ``` npm run watch ``` or, ``` npm run dev ``` or, ``` npm run prod ```
4345
44- Be sure you have added ** tailwindcss** to your page.
46+ Be sure that ** tailwindcss** has been added to page.
4547
4648## Usage
4749
4850- ### Pagination
4951
50- for pagination you can use ``` <x-paginate /> ``` tag with ``` :elems="" ``` to pass pagination items.
51- all parameters for paginate tag that you may use :
52+ For pagination use ``` <x-paginate /> ``` tag with ``` :elems="" ``` to pass pagination items.
53+
54+ All parameters for paginate tag that you may use :
5255
5356
5457| parameter | description | default |
@@ -60,8 +63,20 @@ all parameters for paginate tag that you may use :
6063| prevInResponsive="string" | previous button's html in responsive pagination | laravel's default |
6164| nextInResponsive="string" | next button's html in responsive pagination | laravel's default |
6265| : showDisabledButtons ="boolean" | show disabled buttons when paginator is on first or last page | depends on theme |
63- | : showPaginatorDetails ="boolean" | show "Showing 4 to 6 of 12 results" or not | true |
64- | class="string" | main tag of pagination class | |
66+ | : showPaginatorDetails ="boolean" | show text "Showing 4 to 6 of 12 results" or not | true |
67+ | class="string" | class for pagination main (parent) tag | |
68+
69+
70+ for example:
71+
72+ ``` html
73+ <x-paginate
74+ :elems =" $users"
75+ theme =" tailwind-gray-circled"
76+ :showPaginatorDetails =" false"
77+ :showDisabledButtons =" true"
78+ />
79+ ```
6580
6681
6782## Themes
@@ -106,6 +121,10 @@ all parameters for paginate tag that you may use :
106121
107122<br />
108123
124+ ## Modification
125+
126+ You can modify components which located in ** resources/vendor/pagination** .
127+
109128## License
110129
111130[ License] ( LICENSE )
0 commit comments