Download the PHP package tomsix/laravel-components-library without Composer

Laravel Components Library

A collection of pre-made Blade components for Boostrap 4 (and 5).

Installation & setup

You can install the package via composer:

composer require tomsix/laravel-components-library

The package will automatically register its service provider.

Usage

Usages Form Components

Use the normal Blade Component syntax from Laravel 7. The form components can be used with the form prefix.

These attributes are special:

• name (required)
• id (When not provided the name will 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

Prepend & append

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.

With v2 is it possible to override de default prepend or append with a slot.

Before & After

Each form component contains 2 extra slots: before and after.

Form Components

Form

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.

Input

Textarea

Select

It is possible to add extra options or a default option with slots.

Model 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

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.

Checkboxes, radiobuttons and switches

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.

Arrays

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.

With keys

Array:

Result:

Without keys

Array:

Result:

Inline

The inline attribute enables the Bootstrap inline-class.

Type

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

Errors

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.

Boostrap 5

More info comming soon

Navigation components

The intention is to use these components inside a navigation bar

Navigation item

The url must be included in the component. The 'active' class will be added automatically.

Navigation label

The label component provides text or an icon. Both props are optional.

Customisation

Config

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.

Components

Optionally you can also publish the components and edit then. They will copy to resources/views/vendor/laravel-components-library.

Form components

php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=form-components

Navigation components

php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=navigation-components

All components

php artisan vendor:publish --provider="TomSix\Components\LibraryServiceProvider" --tag=components

License

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