AdminLTE Blade Components for Laravel 7+

This package contains Laravel Blade Components for AdminLTE 3 free Boostrap admin panel UI Kit. Since, blade components are only available after Laravel 7, thus only laravel 7.x+ can use this package.

AdminLTE Blade Components for Laravel 7+
- Contents
- Installation
- Extract Plugins
- Configurations
- Components
  - Widgets
  - Form Components
    - INPUT
    - INPUT-FILE
    - INPUT-COLOR
    - INPUT-DATE
    - DATE-RANGE
    - INPUT-SWITCH
    - INPUT-TAG
    - INPUT-SLIDER
    - SELECT
    - SELECT2
    - SELECT-ICON
    - TEXTAREA
    - TEXT-EDITOR
    - SUBMIT
- Example Codes
- Summary
- Changelog
- License

Installation

You can install the package via composer:

    composer require dgvai/laravel-adminlte-components

Extract Plugins

    php artisan vendor:publish --tag=adminlte-dg-plugins

Configurations

You can use this package, stand alone with AdminLTE installed in your app. You just need to add an @yield('js') at the bottom of your master blade layout.

Or, if you use jeroennoten/Laravel-AdminLTE package, then you do not need to add anything at master. I will prefer to use this package.

Use this in the jeroennoten/Laravel-AdminLTE config:

        [
            'name' => 'AdminLTE-Components-DG',
            'active' => true,
            'files' => [
                [
                    'type' => 'css',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/select2/css/select2.min.css',
                ],
                [
                    'type' => 'css',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/select2/css/select2-bootstrap4.min.css',
                ],
                [
                    'type' => 'js',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/select2/js/select2.min.js',
                ],
                [
                    'type' => 'js',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/bs-custom-file-input/bs-custom-file-input.min.js',
                ],
                [
                    'type' => 'js',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/moment/moment.min.js',
                ],
                [
                    'type' => 'css',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css',
                ],
                [
                    'type' => 'js',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js',
                ],
                [
                    'type' => 'css',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/summernote/summernote-bs4.css',
                ],
                [
                    'type' => 'js',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/summernote/summernote-bs4.min.js',
                ],
                [
                    'type' => 'css',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/bs-select/css/bootstrap-select.min.css',
                ],
                [
                    'type' => 'js',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/bs-select/js/bootstrap-select.min.js',
                ],
                [
                    'type' => 'css',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/bootstrap-tags-input/bootstrap-tagsinput.css',
                ],
                [
                    'type' => 'js',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/bootstrap-tags-input/bootstrap-tagsinput.js',
                ],
                [
                    'type' => 'js',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/daterangepicker/daterangepicker.js',
                ],
                [
                    'type' => 'css',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/daterangepicker/daterangepicker.css',
                ],
                [
                    'type' => 'css',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css',
                ],
                [
                    'type' => 'js',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js',
                ],
                [
                    'type' => 'css',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/bootstrap-slider/css/bootstrap-slider.min.css',
                ],
                [
                    'type' => 'js',
                    'asset' => true,
                    'location' => '/vendor/dg-plugins/bootstrap-slider/js/bootstrap-slider.min.js',
                ],
            ],
        ],

Components

Widgets

INFO BOX

Info Box
Info Box Full

MINIMUM USAGE

<x-dg-info-box title="Order" text="12" />

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | REQUIRED | TYPE | |-----------|--------------------------------------------------------------------------------------------|----------|---------| | title | Title of the info box | true | string | | text | Data text | true | string | | bg | Background Color of the icon. This follows bootstrap colors: success, info, primary... etc | false | string | | icon | The fontawesome icon class. Eg. fas fa-star, fas fa-user-plus | false | string | | grad | Use gradient color? true/false | false | boolean | | full | Use full INFO BOX? true/false | false | boolean | | progress | Show Progress bar? | false | int | | comment | Show comment? | false | string | | id | Dynamic Binding? | false | string |

EXAMPLE

<x-dg-info-box bg="success" title="Yo title" text="123" icon="fas fa-star" :full="true" :grad="true"/>

DYNAMIC BINDINGS
Set id attibute, this will enable dynamic attributes for: | ID | |----| |#{id}-title| |#{id}-text| |#{id}-progress| |#{id}-comment|

EXAMPLE

<x-dg-info-box bg="success" title="Users" text="100" icon="fas fa-star" :full="true" :grad="true" id="userbox" />

<script>
    $(()=>{
        $('#userbox-title').text('Users');
        $('#userbox-text').text('102');
    });
</script>

SMALL BOX

Small Box

MINIMUM USAGE

<x-dg-small-box title="New User" text="500" />

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | REQUIRED | TYPE | |-----------|--------------------------------------------------------------------------------------------|----------|---------| | title | Title of the info box | true | string | | text | Data text | true | string | | bg | Background Color of the icon. This follows bootstrap colors: success, info, primary... etc | false | string | | icon | The fontawesome icon class. Eg. fas fa-star, fas fa-user-plus | false | string | | url | The url to follow. | false | string | | urlText | Text of the HyperLink. | false | string | | loading | Set loading state true/false | false | boolean | | id | Dynamic Binding? | false | string |

EXAMPLE

<x-dg-small-box title="Small box" text="500" bg="warning" url="#" urlText="See More" loading="false" />

DYNAMIC BINDINGS
Set id attibute, this will enable dynamic attributes for: | ID | |----| |#{id}-title| |#{id}-text| |#{id}-link|

EXAMPLE

<x-dg-small-box title="Small box" text="500" bg="warning" url="#" urlText="See More" loading="false" id="userbox"/>

<script>
    $(()=>{
        $('#userbox-text').text('102');
        $('#userbox-link').attr('href',new.link);
    });
</script>

CARDS

Cards

MINIMUM USAGE

<x-dg-card title="Title">
    ...
</x-dg-card>

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | REQUIRED | TYPE | |-------------|--------------------------------------------------------------------------------------------|----------|---------| | title | Title of the Card | true | string | | bg | Background Color of the icon. This follows bootstrap colors: success, info, primary... etc | false | string | | collapsed | Is Collapsed? true/false | false | boolean | | removable | Is removable? true/false | false | boolean | | maximizable | Is maximizable? true/false | false | boolean | | disabled | Is disabled? true/false | false | boolean | | outline | Is outlined? true/false | false | boolean | | full | Is full background? true/false | false | boolean |

EXAMPLE

<x-dg-card title="Title" bg="primary" :outline="true" :full="true" :collapsed="false" :maximizable="true"           :removable="true" :disabled="false">
    ...
</x-dg-card>

ALERT

Alerts

MINIMUM USAGE

<x-dg-alert title="Alert!">
    This is alert
</x-dg-alert>

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | REQUIRED | TYPE | |-------------|---------------------------------------------------------------|----------|---------| | title | Title of the Alert | true | string | | type | Type of alert. Boostrap types: success, info, primary,... etc | false | string | | dismissable | Is the alert dismissable? true/false | false | boolean |

EXAMPLE

<x-dg-alert type="danger" title="Error!" :dismissable="true">
    This is alert
</x-dg-alert>

CALLOUT

Alerts

MINIMUM USAGE

<x-dg-callout>This is callout</x-dg-callout>

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | REQUIRED | TYPE | |-----------|---------------------------------------------------------------|----------|--------| | title | Title of the Callout | false | string | | type | Type of alert. Boostrap types: success, info, primary,... etc | false | string |

EXAMPLE

<x-dg-callout type="warning" title="Oops!">
    This is callout
</x-dg-callout>

PROGRESS

Alerts

MINIMUM USAGE

<x-dg-progress value="56"/>

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | REQUIRED | TYPE | |-----------|---------------------------------------------------------------------|----------|---------| | bg | Type of background. Boostrap backgd: success, info, primary,... etc | false | string | | size | Size or progress bar: sm, xs, xxs | false | string | | value | Value of progress. | true | numeric | | stripped | Is stripped design? true/false | false | boolean | | vertical | Is vertical? true/false | false | boolean |

EXAMPLE

<x-dg-progress value="56" bg="danger" size="sm" :stripped="true" :vertical="false"/>

PROFILE FLAT

Alerts

USAGE

<x-dg-profile-flat img="https://via.placeholder.com/150" name="Nadia Carmicheal" desc="Lead Developer">
    <x-dg-profile-flat-item title="Projects" text="31" url="#" badge="primary"/>
    <x-dg-profile-flat-item title="Tasks" text="5" />
    <x-dg-profile-flat-item title="Completed Projects" text="12" badge="success" />
    <x-dg-profile-flat-item title="Followers" text="842" badge="danger" />
</x-dg-profile-flat>

PROFILE WIDGET

Alerts

USAGE

<x-dg-profile-widget img="https://via.placeholder.com/150" name="Alexander Prince" desc="Founder CEO" bg="info">
    <x-dg-profile-widget-item title="followers" text="533"/>
    <x-dg-profile-widget-item title="sales" text="20" col="4"/>
    <x-dg-profile-widget-item title="inbox" text="0"/>
</x-dg-profile-widget>

<x-dg-profile-widget img="https://via.placeholder.com/150" name="Elizabeth Pierce" desc="Founder CEO" cover="https://via.placeholder.com/150">
    <x-dg-profile-widget-item title="followers" text="533"/>
    <x-dg-profile-widget-item title="sales" text="20" col="4"/>
    <x-dg-profile-widget-item title="inbox" text="0"/>
</x-dg-profile-widget>

MODAL

MINIMUM USAGE

<x-dg-modal id="login_modal" title="Modal Title">
    ...
</x-dg-modal>

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | REQUIRED | TYPE | |-----------|------------------------------------|----------|---------| | id | ID of modal | true | string | | title | Title of modal | true | string | | size | modal size: sm,lg,fluid | false | string | | centered | is centered? true/false | false | boolean | | index | No of index. (Modal up on a modal) | false | integer |

EXAMPLE

<x-dg-modal id="login_modal" title="Modal Title" size="sm" :centered="true" index="1">
    ...
</x-dg-modal>

DATATABLE

MINIMUM USAGE

<x-dg-datatable id="sales-table" :heads="['#','Name','Phone','Actions']"/>
...

<script>
$(()=>{
   $('#sales-table').Datatable({
       ...
       ...
   });
});
</script>

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | REQUIRED | TYPE | |-----------|-------------------------------|----------|---------| | id | ID of the table | true | string | | heads | Array of the headings (thead) | true | array | | beautify | to beautify? true/false | false | boolean | | bordered | is bordered? true/false | false | boolean | | hoverable | is hoverable? true/false | false | boolean | | condensed | is condensed? true/false | false | boolean | | footer | has footer? true/false | false | boolean | | buttons | has buttons (print/export)? true/false | false | boolean |

ACKNOWLEDGEMENTS Use Dom : 'Blftrip' while using buttons. See Examples to be more clear!

Form Components

INPUT

USAGE

<x-dg-input />

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | DEFAULT | TYPE | |-------------|---------------------------------|-------------|---------| | type | Input Type | text | string | | id | Input ID | null | string | | name | Input name | null | string | | label | Input Label | Input Label | string | | placeholder | Input placeholder | null | string | | topclass | class along with 'fomr-group' | null | string | | inputclass | class along with 'form-control' | null | string | | value | Input value | null | string | | disabled | is disabled? | false | boolean | | required | is required? | false | boolean | | step | HTML Attr: step | false | int | | max | HTML Attr: max | false | int | | maxlength | HTML Attr: maxlength | false | int | | pattern | HTML Attr: pattern | false | regex |

INPUT-FILE

REQUIRES
bs-custom-file-input.min.js

USAGE

<x-dg-input-file />

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | DEFAULT | TYPE | |-------------|---------------------------------|-------------|---------| | id | Input ID | null | string | | name | Input name | null | string | | label | Input Label | Input Label | string | | placeholder | Input placeholder | null | string | | topclass | class along with 'fomr-group' | null | string | | inputclass | class along with 'form-control' | null | string | | value | Input value | null | string | | disabled | is disabled? | false | boolean | | required | is required? | false | boolean | | multiple | is multiple? | false | boolean |

INPUT-COLOR

REQUIRES
bootstrap-colorpicker

USAGE

<x-dg-input-color id="myID" />

INPUT-DATE

REQUIRES
tempusdominus-bootstrap-4

USAGE

<x-dg-input-date id="myID" />

DATE-RANGE

REQUIRES
datetimepicker

USAGE

<x-dg-date-range id="picker" callback="console.log('this is callback function')" />

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | DEFAULT | TYPE | |-------------|---------------------------------|-------------|---------| | id | Input ID | null | string | | title | Input Title | Filter Range | string | | icon | Icon | far fa-calendar-alt | string | | topclass | class along with 'fomr-group' | null | string | | inputclass | class along with 'filter button' | null | string | | init | The initial position of range, (0-5) * | 2 | integer | | callback | The JS callback function to run on change filter | null | string (js) |

* init
0 - Today
1 - Yesterday
2 - Last 7 Days
3 - Last 30 Days
4 - This Month
5 - Last Month

INPUT-SWITCH

REQUIRES
bootstrap-switch

USAGE

<x-dg-input-switch/>

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | DEFAULT | TYPE | |-------------|---------------------------------|-------------|---------| | id | Input ID | null | string | | name | Input name | null | string | | label | Input Label | Input Label | string | | placeholder | Input placeholder | null | string | | topclass | class along with 'fomr-group' | null | string | | inputclass | class along with 'form-control' | null | string | | disabled | is disabled? | false | boolean | | required | is required? | false | boolean | | checked | is checked? | false | boolean |

INPUT-TAG

REQUIRES
bootstrap-tagsinput

USAGE

<x-dg-input-tag/>

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | DEFAULT | TYPE | |-------------|---------------------------------|-------------|---------| | id | Input ID | null | string | | name | Input name | null | string | | label | Input Label | Input Label | string | | placeholder | Input placeholder | null | string | | topclass | class along with 'fomr-group' | null | string | | inputclass | class along with 'form-control' | null | string | | disabled | is disabled? | false | boolean | | required | is required? | false | boolean | | max | max tag count | 10 | integer |

INPUT-SLIDER

REQUIRES
bootstrap-slider

USAGE

<x-dg-input-slider id="myID"/>

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | DEFAULT | TYPE | |-------------|---------------------------------|-------------|---------| | id | Input ID | none | string | | name | Input name | null | string | | label | Input Label | Input Label | string | | topclass | class along with 'fomr-group' | null | string | | inputclass | class along with 'form-control' | null | string | | disabled | is disabled? | false | boolean | | required | is required? | false | boolean | | min | minimum | 0 | signed int | | max | maximum | 100 | signed int | | value | value | null | string | | color | blue, green, red, teal, yellow, purple | blue | string | | tick | Enable Tick? | false | boolean | | ticks | Ticks : [0, 10, 20, ...] | null | string | | tickLabels | Tick Labels : ["low", "medium", "high" ...] | null | string | | vertical | Is vertical? | false | boolean |

SELECT

USAGE

<x-dg-select id="myID">
    <x-dg-option value="val">Text</x-dg-option>
</x-dg-select>

ALL AVAILABLE ATTRIBUTES: SELECT
| ATTRIBUTE | DETAILS | DEFAULT | TYPE | |-------------|---------------------------------|-------------|---------| | id | Input ID | null | string | | name | Input name | null | string | | label | Input Label | Input Label | string | | topclass | class along with 'fomr-group' | null | string | | inputclass | class along with 'form-control' | null | string | | disabled | is disabled? | false | boolean | | required | is required? | false | boolean | | multiple | is multiple? | false | boolean |

ALL AVAILABLE ATTRIBUTES: OPTION
| ATTRIBUTE | DETAILS | DEFAULT | TYPE | |-----------|-----------------|---------|---------| | value | value of option | null | string | | selected | is selected? | false | boolean | | disabled | is disabled? | false | boolean |

SELECT2

REQUIRES
select2

USAGE

<x-dg-select2 id="myID">
    <x-dg-option value="val">Text</x-dg-option>
</x-dg-select2>

SELECT-ICON

REQUIRES
bootstrap-select

USAGE

<x-dg-select-icon id="myID">
    <x-dg-option value="val" icon="true" content="fas fa-star">Text</x-dg-option>
</x-dg-select-icon>

ALL AVAILABLE ATTRIBUTES: OPTION
| ATTRIBUTE | DETAILS | DEFAULT | TYPE | |-----------|-----------------|---------|---------| | value | value of option | null | string | | icon | has icon? | false | boolean | | content | icon class | null | string | | selected | is selected? | false | boolean | | disabled | is disabled? | false | boolean |

TEXTAREA

USAGE

<x-dg-textarea>Hi,,,</x-dg-textarea>

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | DEFAULT | TYPE | |-------------|---------------------------------|-------------|---------| | id | Input ID | null | string | | name | Input name | null | string | | label | Input Label | Input Label | string | | placeholder | Input placeholder | null | string | | topclass | class along with 'fomr-group' | null | string | | inputclass | class along with 'form-control' | null | string | | disabled | is disabled? | false | boolean | | required | is required? | false | boolean | | rows | textarea rows | 10 | integer |

TEXT-EDITOR

REQUIRES
summernote

USAGE

<x-dg-text-editor id="myEditor"/>

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | DEFAULT | TYPE | |-------------|---------------------------------|-------------|---------| | id | Input ID | null | string | | name | Input name | null | string | | label | Input Label | Input Label | string | | placeholder | Input placeholder | null | string | | topclass | class along with 'fomr-group' | null | string | | inputclass | class along with 'form-control' | null | string | | disabled | is disabled? | false | boolean | | required | is required? | false | boolean | | body | texteditor text body | null | long text | | height | texteditor height | 800 | integer | | fonts | set custom fonts | null | array |

Example Fonts Array

    $fonts = ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Impact', 'Montserrat',  'Open Sans'];

SUBMIT

<x-dg-submit />

ALL AVAILABLE ATTRIBUTES
| ATTRIBUTE | DETAILS | DEFAULT | TYPE | |-------------|---------------------------------|-------------|---------| | type | button type: success, primary, ...,etc | info | string | | topclass | class along with 'fomr-group' | null | string | | label | button label | Submit | string | | icon | button icon | fas fa-save | string | | inputclass | class along with 'form-control' | null | string |

Example Codes

You can browse through the examples of advanced usages from examples directory.

Summary

This document might not be well-documented. I will happily accept any documentation pull-requests.

PULL REQUESTS for new components should be in non-master branch

Changelog

Please see CHANGELOG for more information what has changed recently.

License

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

AdminLTE Blade Components for Laravel 7+

Contents

Installation

Extract Plugins

Configurations

Components

Widgets

INFO BOX

SMALL BOX

CARDS

ALERT

CALLOUT

PROGRESS

PROFILE FLAT

PROFILE WIDGET

MODAL

DATATABLE

Form Components

INPUT

INPUT-FILE

INPUT-COLOR

INPUT-DATE

DATE-RANGE

INPUT-SWITCH

INPUT-TAG

INPUT-SLIDER

SELECT

SELECT2

SELECT-ICON

TEXTAREA

TEXT-EDITOR

SUBMIT

Example Codes

Summary

Changelog

License