https://github.com/dgvai/laravel-adminlte-components
Laravel Blade Components For AdminLTE Bootstrap Admin Template
https://github.com/dgvai/laravel-adminlte-components
adminlte adminlte-component blade-components laravel laravel-adminlte laravel-blade laravel-blade-component
Last synced: about 1 month ago
JSON representation
Laravel Blade Components For AdminLTE Bootstrap Admin Template
- Host: GitHub
- URL: https://github.com/dgvai/laravel-adminlte-components
- Owner: dgvai
- License: mit
- Created: 2020-05-11T13:14:18.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-02-03T13:08:29.000Z (about 5 years ago)
- Last Synced: 2025-12-14T07:52:57.871Z (4 months ago)
- Topics: adminlte, adminlte-component, blade-components, laravel, laravel-adminlte, laravel-blade, laravel-blade-component
- Language: JavaScript
- Homepage:
- Size: 465 KB
- Stars: 74
- Watchers: 7
- Forks: 15
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# AdminLTE Blade Components for Laravel 7+
[](https://packagist.org/packages/dgvai/laravel-adminlte-components)
[](https://packagist.org/packages/dgvai/laravel-adminlte-components)
[](https://packagist.org/packages/dgvai/laravel-adminlte-components)
[](https://packagist.org/packages/dgvai/laravel-adminlte-components)
[](https://packagist.org/packages/dgvai/laravel-adminlte-components)
[](https://packagist.org/packages/dgvai/laravel-adminlte-components)
[](https://packagist.org/packages/dgvai/laravel-adminlte-components)
This package contains [Laravel Blade Components](https://laravel.com/docs/7.x/blade#components) for [AdminLTE 3](https://adminlte.io/docs/3.0/) free Boostrap admin panel UI Kit. Since, blade components are only available after Laravel 7, thus only laravel 7.x+ can use this package.
## Contents
- [AdminLTE Blade Components for Laravel 7+](#adminlte-blade-components-for-laravel-7)
- [Contents](#contents)
- [Installation](#installation)
- [Extract Plugins](#extract-plugins)
- [Configurations](#configurations)
- [Components](#components)
- [Widgets](#widgets)
- [**INFO BOX**](#info-box)
- [**SMALL BOX**](#small-box)
- [**CARDS**](#cards)
- [**ALERT**](#alert)
- [**CALLOUT**](#callout)
- [**PROGRESS**](#progress)
- [**PROFILE FLAT**](#profile-flat)
- [**PROFILE WIDGET**](#profile-widget)
- [**MODAL**](#modal)
- [**DATATABLE**](#datatable)
- [Form Components](#form-components)
- [INPUT](#input)
- [INPUT-FILE](#input-file)
- [INPUT-COLOR](#input-color)
- [INPUT-DATE](#input-date)
- [DATE-RANGE](#date-range)
- [INPUT-SWITCH](#input-switch)
- [INPUT-TAG](#input-tag)
- [INPUT-SLIDER](#input-slider)
- [SELECT](#select)
- [SELECT2](#select2)
- [SELECT-ICON](#select-icon)
- [TEXTAREA](#textarea)
- [TEXT-EDITOR](#text-editor)
- [SUBMIT](#submit)
- [Example Codes](#example-codes)
- [Summary](#summary)
- [Changelog](#changelog)
- [License](#license)
## Installation
You can install the package via composer:
``` bash
composer require dgvai/laravel-adminlte-components
```
## Extract Plugins
``` bash
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](https://github.com/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](https://github.com/jeroennoten/Laravel-AdminLTE) config:
```php
[
'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**
**MINIMUM USAGE**
```html
```
**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**
```html
```
**DYNAMIC BINDINGS**
Set ``id`` attibute, this will enable dynamic attributes for:
| ID |
|----|
|#{id}-title|
|#{id}-text|
|#{id}-progress|
|#{id}-comment|
**EXAMPLE**
```html
$(()=>{
$('#userbox-title').text('Users');
$('#userbox-text').text('102');
});
```
#### **SMALL BOX**
**MINIMUM USAGE**
```html
```
**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**
```html
```
**DYNAMIC BINDINGS**
Set ``id`` attibute, this will enable dynamic attributes for:
| ID |
|----|
|#{id}-title|
|#{id}-text|
|#{id}-link|
**EXAMPLE**
```html
$(()=>{
$('#userbox-text').text('102');
$('#userbox-link').attr('href',new.link);
});
```
#### **CARDS**
**MINIMUM USAGE**
```html
...
```
**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**
```html
...
```
#### **ALERT**
**MINIMUM USAGE**
```html
This is 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**
```html
This is alert
```
#### **CALLOUT**
**MINIMUM USAGE**
```html
This is 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**
```html
This is callout
```
#### **PROGRESS**
**MINIMUM USAGE**
```html
```
**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**
```html
```
#### **PROFILE FLAT**
**USAGE**
```html
```
#### **PROFILE WIDGET**
**USAGE**
```html
```
#### **MODAL**
**MINIMUM USAGE**
```html
...
```
**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**
```html
...
```
#### **DATATABLE**
**MINIMUM USAGE**
```html
...
$(()=>{
$('#sales-table').Datatable({
...
...
});
});
```
**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**
```html
```
**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](https://www.npmjs.com/package/bs-custom-file-input)
**USAGE**
```html
```
**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](https://www.npmjs.com/package/bootstrap-colorpicker)
**USAGE**
```html
```
**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 |
#### INPUT-DATE
**REQUIRES**
[tempusdominus-bootstrap-4](https://tempusdominus.github.io/bootstrap-4/)
**USAGE**
```html
```
**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 |
| format | [Moment.js](https://momentjs.com/docs/#/displaying/format/) datetime format | YYYY-MM-DD | string |
#### DATE-RANGE
**REQUIRES**
[datetimepicker](https://www.daterangepicker.com/)
**USAGE**
```html
```
**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](https://bttstrp.github.io/bootstrap-switch/)
**USAGE**
```html
```
**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](https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/)
**USAGE**
```html
```
**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](https://github.com/seiyria/bootstrap-slider)
**USAGE**
```html
```
**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**
```html
Text
```
**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](https://select2.org/)
**USAGE**
```html
Text
```
**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 |
#### SELECT-ICON
**REQUIRES**
[bootstrap-select](https://developer.snapappointments.com/bootstrap-select/)
**USAGE**
```html
Text
```
**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 |
| icon | has icon? | false | boolean |
| content | icon class | null | string |
| selected | is selected? | false | boolean |
| disabled | is disabled? | false | boolean |
#### TEXTAREA
**USAGE**
```html
Hi,,,
```
**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](https://summernote.org/)
**USAGE**
```html
```
**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**
```php
$fonts = ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Impact', 'Montserrat', 'Open Sans'];
```
#### SUBMIT
```html
```
**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](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](CHANGELOG.md) for more information what has changed recently.
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.