Laravel ignite is a package that provides the developer with rich web-ui compnents that are independent of browsers and can be fully styled to help developers deliver stylish application with coherent visual design.
Never build your html forms from scratch again as ignite takes care of that for you.
- Fully CSS Styled components that can be customized.
- built in CSRF field.
- Built in spoofing of PUT, PATCH, or DELETE requests.
- Support for laravel validation out of the box.
- Custom select field.
- Custom radio/checkbox field.
- Custom fields such as date selection, and searchable dropdowns (separate packages)
Under the hood, Laravel ignite uses Alpinejs and Tailwind CSS
You can install the package via composer:
composer require pnx/laravel-ignite
The package should be auto discovered by laravel.
If that is not the case, you need to add the ServiceProvider manually in the providers array in config/app.php:
'providers' => [
...
/*
* Package Service Providers...
*/
Ignite\ServiceProvider::class,
...
],Ignite can be configured the way you want it if the default settings is not enough.
To publish the config file config/ignite.php. Run this command:
php artisan vendor:publish --tag=ignite-config
If you want to modify the view scripts, you can publish those to resources/views/vendor/ignite with this command:
php artisan vendor:publish --tag=ignite-views
All standard input attributes are of course available to ignite components.
However some behaviors are altered for some attributes described below
This attribute is required
If id attribute is absent, components will use name as id
The value passed to a component is passed through laravels old() view helper function.
Components will therefore use the old values if they are present in the request, otherwise the user provided default is used.
This is a boolean variable and when true, will render the html input field with disabled="disabled"
This package provides the developer with alot of prewritten view components:
<x-ignite-form method="DELETE" action="/some/url">
...
</x-ignite-form>method - HTTP method to use when the form is submitted GET, POST, HEAD, PUT, DELETE is valid, default: POST
Generates a label element.
<x-ignite-label for="username">Username</x-ignite-label>type - Type of label to render, values: block, inline, defaults to block
Generates a input element
<x-ignite-input name="username" class="px-4 py-2"/><x-ignite-input type="password" name="password" class="px-4 py-2"/>type: type of input element, defaults to text
Shortcut for <x-ignite-input> with type="password"
<x-ignite-password name="password" placeholder="Password" class="px-4 py-2" />Shortcut for <x-ignite-input> with type="email"
<x-ignite-email name="email" placeholder="Email address" class="px-4 py-2" />Generates a simple select dropdown element
<x-ignite-select name="fruit" :options="[ 'Apple', 'Pear', 'Lemon' ]" class="px-4 py-2" />Associative array
<x-ignite-select name="role" :options="['admin' => 'Admin', 'writer' => 'Writer', 'guest' => 'Guest']" class="px-4 py-2" />options: array of options to show in the select dropdown. array keys are used as value of the field when submitted and array values are displayed in the dropdown.
<x-ignite-textarea name="message" class="px-4 py-2" />Generates a checkbox element
<x-ignite-checkbox name="user_banned" class="px-4 py-2" />NOTE: the value submitted is "true" or "false" strings.
Generates a group of one or more radio buttons.
<x-ignite-radio name="fruit" :options="[ 'Apple', 'Pear', 'Lemon' ]" class="px-4 py-2" />options: array of options, each option will render a separate radio button. array keys are used as value of the field when submitted and array values are displayed next to the radio button.
Same as checkbox but rendered as a toggle switch instead of an box.
<x-ignite-toggle-switch name="user_banned" class="px-4 py-2" />Henrik Hautakoski - [email protected]