Download the PHP package dgvai/laravel-adminlte-components without Composer
On this page you can find all versions of the php package dgvai/laravel-adminlte-components. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download dgvai/laravel-adminlte-components
More information about dgvai/laravel-adminlte-components
Files in dgvai/laravel-adminlte-components
Package laravel-adminlte-components
Short Description Laravel Blade Components For AdminLTE Bootstrap Admin Template
License MIT
Informations about the package laravel-adminlte-components
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.
Contents
- 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
- Widgets
- Example Codes
- Summary
- Changelog
- License
Installation
You can install the package via composer:
Extract 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:
Components
Widgets
INFO BOX
MINIMUM USAGE
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
DYNAMIC BINDINGS Set id attibute, this will enable dynamic attributes for: |
ID |
---|---|
#{id}-title | |
#{id}-text | |
#{id}-progress | |
#{id}-comment |
EXAMPLE
SMALL BOX
MINIMUM USAGE
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
DYNAMIC BINDINGS Set id attibute, this will enable dynamic attributes for: |
ID |
---|---|
#{id}-title | |
#{id}-text | |
#{id}-link |
EXAMPLE
CARDS
MINIMUM USAGE
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
ALERT
MINIMUM USAGE
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
CALLOUT
MINIMUM USAGE
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
PROGRESS
MINIMUM USAGE
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
PROFILE FLAT
USAGE
PROFILE WIDGET
USAGE
MODAL
MINIMUM USAGE
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
DATATABLE
MINIMUM USAGE
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
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
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
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
USAGE
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 datetime format | YYYY-MM-DD | string |
DATE-RANGE
REQUIRES
datetimepicker
USAGE
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
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
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
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
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
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
USAGE
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
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
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
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.