dgvai/laravel-adminlte-components

Laravel Blade Components For AdminLTE Bootstrap Admin Template

Installs: 3 527

Dependents: 0

Suggesters: 0

Security: 0

Stars: 72

Watchers: 7

Forks: 16

Open Issues: 5

Language:JavaScript

Type:laravel-package

2.1.2 2020-07-25 05:58 UTC

This package is auto-updated.

Last update: 2024-10-29 06:11:47 UTC


README

Latest Stable Version Total Downloads Latest Unstable Version License Monthly Downloads Daily Downloads composer.lock

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

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

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

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

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

Alerts

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

Alerts

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

Alerts

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

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

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.