1.Introduction
Recently, a prominent member of the Laravel community, Dries Vints, has released an attractive open source project called the Blade UI Kit .
Blade UI Kit is a package consisting of pre-made components , your job is to just use it in your Blade Views, of course you can extend and customize it.
By default, the Blade UI Kit includes components such as:
- A countdown timer
- Markdown and rich text editors
- An avatar generator
- Form inputs
- Markdown to HTML converter
- Date & Color pickers
And there are many cool components on this too, you can see the details on the Document
2. Get started
Requirements
- PHP 7.3 or higher
- Laravel 7.0 or higher
Installation
Before installing a package , you should clear your configuration cache:
1 2 | php artisan config:clear |
Then install by shaking:
1 2 | composer require blade-ui-kit/blade-ui-kit |
Kiểm TRA
To show an alert in the usual way, you usually code
1 2 3 4 5 6 | @if (session('status')) <div class="alert alert-success" role="alert"> {{ session('status') }} </div> @endif |
But with the divine Blade UI Kit , we only need one line of code (actually we include 1 components )
1 2 | <x-alert class="alert alert-success"/> |
To create an input password
1 2 | <x-password /> |
To create a Form
1 2 3 4 | <x-form action="http://example.com"> Form fields... </x-form> |
To create Form File Uploads
1 2 3 4 | <x-form action="http://example.com" has-files> Form fields... </x-form> |
Custom
To change the name and class of the password input , just like HTML we add two attributes
1 2 | <x-password name="my_password" class="p-4" /> |
After rendering the HTML :
1 2 | <input name="my_password" type="password" id="my_password" class="p-4" /> |
Example
This is a project developed based on components from Blade UI Kit : Example Laravel project
3. Conclusion
The Blade UI Kit is currently in development, which means it might still have some bugs until it’s finalized.
Hopefully with this package you can shorten the time to complete the HTML for your view blade .
Sincerely goodbye and win!