dgvai / laravel-adminlte-components
Laravel Blade Components For AdminLTE Bootstrap Admin Template
Installs: 3 537
Dependents: 0
Suggesters: 0
Security: 0
Stars: 72
Watchers: 7
Forks: 16
Open Issues: 5
Language:JavaScript
Type:laravel-package
README
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+
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
MINIMUM USAGE
<x-dg-info-box title="Order" text="12" />
ALL AVAILABLE ATTRIBUTES
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:
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
MINIMUM USAGE
<x-dg-small-box title="New User" text="500" />
ALL AVAILABLE ATTRIBUTES
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:
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
MINIMUM USAGE
<x-dg-card title="Title"> ... </x-dg-card>
ALL AVAILABLE ATTRIBUTES
EXAMPLE
<x-dg-card title="Title" bg="primary" :outline="true" :full="true" :collapsed="false" :maximizable="true" :removable="true" :disabled="false"> ... </x-dg-card>
ALERT
MINIMUM USAGE
<x-dg-alert title="Alert!"> This is alert </x-dg-alert>
ALL AVAILABLE ATTRIBUTES
EXAMPLE
<x-dg-alert type="danger" title="Error!" :dismissable="true"> This is alert </x-dg-alert>
CALLOUT
MINIMUM USAGE
<x-dg-callout>This is callout</x-dg-callout>
ALL AVAILABLE ATTRIBUTES
EXAMPLE
<x-dg-callout type="warning" title="Oops!"> This is callout </x-dg-callout>
PROGRESS
MINIMUM USAGE
<x-dg-progress value="56"/>
ALL AVAILABLE ATTRIBUTES
EXAMPLE
<x-dg-progress value="56" bg="danger" size="sm" :stripped="true" :vertical="false"/>
PROFILE FLAT
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
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
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
ACKNOWLEDGEMENTS
Use Dom : 'Blftrip' while using buttons. See Examples to be more clear!
Form Components
INPUT
USAGE
<x-dg-input />
ALL AVAILABLE ATTRIBUTES
INPUT-FILE
REQUIRES
bs-custom-file-input.min.js
USAGE
<x-dg-input-file />
ALL AVAILABLE ATTRIBUTES
INPUT-COLOR
REQUIRES
bootstrap-colorpicker
USAGE
<x-dg-input-color id="myID" />
ALL AVAILABLE ATTRIBUTES
INPUT-DATE
REQUIRES
tempusdominus-bootstrap-4
USAGE
<x-dg-input-date id="myID" />
ALL AVAILABLE ATTRIBUTES
DATE-RANGE
REQUIRES
datetimepicker
USAGE
<x-dg-date-range id="picker" callback="console.log('this is callback function')" />
ALL AVAILABLE ATTRIBUTES
* 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
INPUT-TAG
REQUIRES
bootstrap-tagsinput
USAGE
<x-dg-input-tag/>
ALL AVAILABLE ATTRIBUTES
INPUT-SLIDER
REQUIRES
bootstrap-slider
USAGE
<x-dg-input-slider id="myID"/>
ALL AVAILABLE ATTRIBUTES
SELECT
USAGE
<x-dg-select id="myID"> <x-dg-option value="val">Text</x-dg-option> </x-dg-select>
ALL AVAILABLE ATTRIBUTES: SELECT
ALL AVAILABLE ATTRIBUTES: OPTION
SELECT2
REQUIRES
select2
USAGE
<x-dg-select2 id="myID"> <x-dg-option value="val">Text</x-dg-option> </x-dg-select2>
ALL AVAILABLE ATTRIBUTES: SELECT
ALL AVAILABLE ATTRIBUTES: OPTION
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: SELECT
ALL AVAILABLE ATTRIBUTES: OPTION
TEXTAREA
USAGE
<x-dg-textarea>Hi,,,</x-dg-textarea>
ALL AVAILABLE ATTRIBUTES
TEXT-EDITOR
REQUIRES
summernote
USAGE
<x-dg-text-editor id="myEditor"/>
ALL AVAILABLE ATTRIBUTES
Example Fonts Array
$fonts = ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Impact', 'Montserrat', 'Open Sans'];
SUBMIT
<x-dg-submit />
ALL AVAILABLE ATTRIBUTES
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.