A collection of pre-made Blade components for Boostrap 4 (and 5).
You can install the package via composer:
composer require tomsix/laravel-components-library
The package will automatically register its service provider.
Use the normal Blade Component syntax from Laravel 7. The form components can be used with the form prefix.
<x-form::input name="title" />These attributes are special:
- name (required)
- id (When not provided the
namewill be used) - label (not shown when null)
- value (makes use of the old() helper)
All other attributes wil be merged on the input html-tag
The input, select and textarea components are rendered in an extra div with the Bootstrap input-groupclass. With this extra it's possible to add a prepend and append.
<x-form::input name="username" label="Username" prepend="@" />With v2 is it possible to override de default prepend or append with a slot.
<div class="mb-3">
<x-form::input type="file" name="photos" label="Foto" multiple>
<x-slot name="append">
<span class="input-group-append">
<button class="btn btn-secondary" type="button">Demo</button>
</span>
</x-slot>
</x-form::input>
</div>Each form component contains 2 extra slots: before and after.
<div class="mb-3">
<x-form::input name="email" id="email" class="form-control-lg" placeholder="email....">
<x-slot name="before">
<label for="email">Custom label</label>
</x-slot>
<x-slot name="after">
<div class="form-text">We'll never share your email with anyone else.</div>
</x-slot>
</x-form::input>
</div>Since V2 there is a form component x-form::form. This will add the CSRF-token and will use the @method directive for PUT and DELETE. The default method is POST instead of GET.
<x-form::form method="PUT" :action="route('user.store')">
<!-- The form content -->
</x-form:::form><x-form::input name="first-name" label="First Name" placeholder="Enter your first name" type="text" /><x-form::textarea name="description" label="Description" placeholder="Typ here ..." /><x-form::select name="animal" :options="[1 => 'cat', 2 => 'dog', 4 => 'cow']" label="Favorite animal" />It is possible to add extra options or a default option with slots.
<x-form::select name="animal" :options="[1 => 'cat', 2 => 'dog', 4 => 'cow']" label="Favorite animal">
<option value="">Choose an animal</option>
</x-form::select>With the model-select component you can use a collection of Eloquent models. The models attribute accepts the collection. It is also possible to use an Eloquent model as the selected value
<x-form::model-select name="user" :models="$users" label="Your friend" key-attribute="id" value-attribute="full_name">
<option value="">Select your friend</option>
</x-form::model-select>By default, id and name are used for the option value and text. This can be changed with key-attribute and value-attribute. The default names can be changed in the config file.
A group of checkboxes makes use of the checkboxes component. It is possible to give an array of options or use the single checkbox component within the slot.
<x-form::checkbox name="terms" value="yes" label="Agree to terms and conditions" /><x-form::checkboxes name="actors[]" label="Favorite actors" :options="$options" type="checkbox" />Checkboxes need an array with options. The array key is used for the checkbox value attribute and the value of the array is used as label text. An array without keys will use numbers starting from 0 as a normal array.
Array:
$options = ['lieven' => 'Lieven Scheire', 'jelle' => 'Jelle De Beule', 'jonas' => 'Jonas Geinaart']; Result:
<input class="form-check-input" type="checkbox" name="actors[]" id="actors-lieven" value="lieven" />Array:
$options = ['Lieven Scheire', 'Jelle De Beule', 'Jonas Geinaart']; Result:
<input class="form-check-input " type="checkbox" name="actors[]" id="actors-0" value="1">The inline attribute enables the Bootstrap inline-class.
Changing the type attribute to radio will work to use radiobuttons. The latest version of Bootstrap 4 has also switches and can be used with the type switch
Form errors has 2 option to render. By default, they are displayed in a component. This can be disabled in the config file.
It's also possible to add an error bag in a view.
<x-form::errors title="There are some incorrect fields" color="warning"/>More info comming soon
The intention is to use these components inside a navigation bar
<nav class="navbar navbar-light bg-light">
<ul class="navbar-nav mr-auto">
<x-navigation-item :href="route('home')" >
<x-navigation-label text="Home" icon="fas fa-globe" />
</x-navigation-item>
</ul>
</nav>The url must be included in the component. The 'active' class will be added automatically.
<x-navigation::item :href="route('home')" >
<p>About</p>
</x-navigation::item>The label component provides text or an icon. Both props are optional.
<x-navigation::label text="Home" icon="fas fa-globe" />You can optionally publish the config file with:
php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=config
The css classes of the elements in a component can be change in the config file. By default, all components use Bootstrap 4 classes.
Optionally you can also publish the components and edit then. They will copy to resources/views/vendor/laravel-components-library.
php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=form-components
php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=navigation-components
php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=components
The MIT License (MIT). Please see License File for more information.