README

Particles - compose your form

A package that provides blade components, compatible with Laravel 6 and earlier, to compose forms in a more structured and easy way.

Installation

You can install the package via composer:

composer require dmb/particles

Usage

Using Particles is pretty straightforward. Each component renders the html markup and takes advantage of the convenience and modularity of the parameters which, in some cases, have default values that can be overridden.

All components are based on bootstrap 4

The components available are:

checkbox
datepicker - based on Datepicker for Bootstrap v1.9.0
input
label
multiple - based on Selec2
radio
select
textarea - ckeditor option based on CkEditor
tooltip - dependecy FancyBox

Supported parameters are

label: string
tooltip: array <name,content>
id: int
type: string default: text|radio|checkbox
class: string default: form-control|form-control date-picker|form-control multiple-select
name: string
value: string
style: string inline style default: width: 100%;|null
readonly: ?bool default null
required: ?bool default null - if true, an asterisk is placed next to the label
disabled: ?bool default null
datas: array <[key,value]> dynamically render data-attributes

Specific parameters for the textarea component are

ckeditor: ?bool default null - if true, activate the ckeditor plugin
rows: int default 3

Specific parameters for the select component are

disableText: string default __('Select an option')

Specific parameters for the multiple component are

multiple: ?bool default mutiple="multiple"
dataPlaceholder: ?string default __('Select an option')
dataAllowClear: ?bool default true
dataTags: ?bool

Specific parameters for the radio and checkbox component are

styleText: string default margin-left:5px

The select, multiple and the textarea components can use the slot to place the relative code between the opening and closing of the component itself

Some examples

@input([
    'label' => 'Label',
    'name' => 'name',
    'tooltip' => [
        'name' => 'name',
        'content' => 'Content text'
    ],
    'value' => 'value',
    'required' => true
])
@endinput

@select([
    'label' => 'Age',
    'name' => 'age',
    'tooltip' => [
        'name' => 'age',
        'content' => 'Lorem ipsum age.'
    ],
    'required' => true
])
    @foreach ( [30,31,32,33,34] as $age )
        <option
            value="{{ $age }}"
            {{ $age === 34 ? 'selected' : null }}
        >
            {{ $age }}
        </option>
    @endforeach
@endselect

@textarea([
    'label' => 'Description',
    'name' => 'description',
    'tooltip' => [
        'name' => 'description',
        'content' => 'Lorem ispum description'
    ],
    'rows' => 10,
    'required' => true,
    'readonly' => true
])
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo sed necessitatibus dignissimos sint porro fugiat natus, eligendi obcaecati nulla itaque expedita commodi tenetur neque quos, sequi pariatur quidem provident reiciendis.
@endtextarea

@multiple([
    'label' => 'Roles',
    'name' => 'roles',
    'dataTags' => true,
    'required' => true
])
    @foreach ( ['Superadmin','Admin','User'] as $role )
        <option
            value="{{ $role }}"
            {{ $role === 'Admin' ? 'selected' : null }}
        >
            {{ $role }}
        </option>
    @endforeach
@endmultiple

The complete documentation with all the parameters, the functionalities and the will be published soon.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Credits

Davide Maria Busi

License

The MIT License (MIT). Please see License File for more information.

dmb / particles

Maintainers

Details