Laravel Blade components collection
Re-usable Laravel Blade components for your projects
Installation
You can install the package via composer:
composer require dcblogdev/laravel-blade-componentsUsage
Form components
All form components accept option parameters that such as class='' style=''
When the method is set to PUT, PATCH or DELETE the @method() will be applied automatically.
Open
Defaults to post method and CSRF token
<x-form.open>
</x-form.open>The method and actions can be passed:
<x-form.open method='delete' action='delete-comment'>
</x-form.open>Form input
Create an input with a name, the name will be used as the label as long as the label is not provided.
<x-form.input name='username'></x-form.input>Outputs:
<div>
<label for='username'>Username</label>
<input type='text' name='username' id='username' value=''>
</div> Use a label
<x-form.input name='username' label='Username'></x-form.input>Use an id and a class
<x-form.input name='username' label='Username' id='username' class='form-input'></x-form.input>The type is set to test by default, it can be changed
<x-form.input name='password' type='password'></x-form.input>Set the input value
<x-form.input name='username' label='Username'>{{ $username }}</x-form.input>Form textarea
<x-form.textarea name='comments'></x-form.textarea>Set the rows and columns
<x-form.textarea name='comments' cols='10' rows='10'></x-form.textarea>Set the textarea data
<x-form.textarea name='comments' cols='10' rows='10'>{{ $comments }}</x-form.textarea>Form checkbox
A checkbox can also be defined, set the name and value
<x-form.checkbox name='terms' value='1'></x-form.checkbox>Check the checkbox by passing its value, as long its a match the checkbox will be checked.
<x-form.checkbox name='terms' value='1'>1</x-form.checkbox>or
<x-form.checkbox name='terms' value='1'>{{ $terms }}</x-form.checkbox>Form radio
A radio can also be defined, set the name, label and value
<x-form.radio name='result' label='Won' value='Won'></x-form.radio>
<x-form.radio name='result' label='Lost' value='Lost'></x-form.radio>
<x-form.radio name='result' label='Draw' value='Draw'></x-form.radio>Pass a value which will check the matching radio.
<x-form.radio name='result' label='Won' value='Won'>{{ $result }}</x-form.radio>
<x-form.radio name='result' label='Lost' value='Lost'>{{ $result }}</x-form.radio>
<x-form.radio name='result' label='Draw' value='Draw'>{{ $result }}</x-form.radio>Check the checkbox by passing its value, as long its a match the checkbox will be checked.
<x-form.checkbox name='terms' value='1'>1</x-form.checkbox>or
<x-form.checkbox name='terms' value='1'>{{ $terms }}</x-form.checkbox>Form select
create a select menu set the name and placeholder for the initial option
<x-form.select name='types' placeholder='Select'>
</x-form.select>Leave off the placeholder to have only the select and options that can be selected
<x-form.select name='types'>
</x-form.select>In order to set the option an array is needed and is looped over and then a nested component is used.
Pass in the key and value from the array
@php
$options = [1 => 'one', 2 => 'two', 3 => 'three'];
@endphp
<x-form.select name='types' placeholder='Select'>
@foreach($options as $key => $value)
<x-form.selectoption key='{{ $key }}' value='{{ $value }}'></x-form.selectoption>
@endforeach
</x-form.select>Form button
Create a button, defaults to a submit type
<x-form.button name='submit'>Submit</x-form.button>Create a button, using only the defaults and a label
<x-form.button>Submit</x-form.button>Changelog
Please see CHANGELOG for more information what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
Credits
License
The MIT License (MIT). Please see License File for more information.