dcblogdev / laravel-blade-components
Laravel Blade components collection
Fund package maintenance!
dcblogdev
Installs: 59
Dependents: 0
Suggesters: 0
Security: 0
Stars: 36
Watchers: 3
Forks: 3
Open Issues: 0
Language:Blade
Requires
- orchestra/testbench: ^5.0|^6.23|^7.0|^8.0|^9.0
- pestphp/pest: ^1.23|^2
- pestphp/pest-plugin-laravel: ^2.0
This package is auto-updated.
Last update: 2024-10-13 22:14:08 UTC
README
There is a Discord community. https://discord.gg/VYau8hgwrm For quick help, ask questions in the appropriate channel.
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-components
Usage
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 dave@dcblog.dev instead of using the issue tracker.
Credits
License
The MIT License (MIT). Please see License File for more information.