Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details

All Projects → dgvai → Laravel Adminlte Components

dgvai / Laravel Adminlte Components

Licence: mit

Laravel Blade Components For AdminLTE Bootstrap Admin Template

Programming Languages

184084 projects - #8 most used programming language

Labels

laravel adminlte

Projects that are alternatives of or similar to Laravel Adminlte Components

Bootstrap4 /Codeigniter 3 Modular (HMVC) App Building Framework - to build enterprise class web applications... Versions: CodeIgniter 3.1.9 AdminLTE 3.4 Bootstrap 4.5.0

Stars: ✭ 166 (+232%)

Mutual labels: laravel, adminlte

Adminlte Laravel

A Laravel 5 package that switchs default Laravel scaffolding/boilerplate to AdminLTE template and Pratt Landing Page with Bootstrap 3.0

Stars: ✭ 1,814 (+3528%)

Mutual labels: laravel, adminlte

Laravelinventry

Stock management application using Laravel 5.4

Stars: ✭ 60 (+20%)

Mutual labels: laravel, adminlte

Laravel Adminpanel

A Laravel Admin Panel (Laravel Version : 6.0)

Stars: ✭ 774 (+1448%)

Mutual labels: laravel, adminlte

Adminlte Generator

Boilerplate of Laravel with InfyOm Laravel Generator for AdminLTE Templates

Stars: ✭ 300 (+500%)

Mutual labels: laravel, adminlte

Laravel Adminlte

Easy AdminLTE integration with Laravel

Stars: ✭ 2,990 (+5880%)

Mutual labels: laravel, adminlte

Employee Mgmt Laravel5.4 Adminlte

The project is using laravel 5.4 and adminlte

Stars: ✭ 141 (+182%)

Mutual labels: laravel, adminlte

Laravel Admin Starter

A Laravel Admin Starter project with Page Builder, Roles, Impersonation, Analytics, Blog, News, Banners, FAQ, Testimonials and more

Stars: ✭ 240 (+380%)

Mutual labels: laravel, adminlte

Fully CMS - Multi Language Content Management System - Laravel

Stars: ✭ 465 (+830%)

Mutual labels: laravel, adminlte

Until 2018, Backpack v3 used this Base package to offer admin authentication and a blank admin panel using AdminLTE. Backpack v4 no longer uses this package, they're now built-in - use Backpack/CRUD instead.

Stars: ✭ 848 (+1596%)

Mutual labels: laravel, adminlte

Laravel Translatable

It's a Laravel database translations manager

Stars: ✭ 47 (-6%)

Mutual labels: laravel

Danyuan Application

初学者 spirng-boot版本

Stars: ✭ 47 (-6%)

Mutual labels: adminlte

Nova Mega Filter

Allows you to control the columns and filters shown on any Nova resource index

Stars: ✭ 49 (-2%)

Mutual labels: laravel

基于 Laravel 5.3 的个人博客系统

Stars: ✭ 49 (-2%)

Mutual labels: laravel

Cursor Pagination

Cursor pagination for your Laravel API

Stars: ✭ 47 (-6%)

Mutual labels: laravel

📤 An open source self-hosted continuous integration and deployment system - QQ群： 656868

Stars: ✭ 1,044 (+1988%)

Mutual labels: laravel

一款基于Laravel框架开发的现代化二次开发框架，是高性能，高效率，高质量的企业级开发框架，具有驱动领域，敏捷开发，轻易上手，高内聚低耦合，开箱即用等特点。

Stars: ✭ 47 (-6%)

Mutual labels: laravel

一个基于laravel的cms系统

Stars: ✭ 46 (-8%)

Mutual labels: laravel

Ülkeler ve Türkiye İl İlçe Semt Mahalle ve Posta Kodu Veritabanı (Laravel)

Stars: ✭ 46 (-8%)

Mutual labels: laravel

Fluent Facebook

A laravel 5 package for reading and writing to facebook graph object with ease in laravelish syntax

Stars: ✭ 49 (-2%)

Mutual labels: laravel

View All Similar Projects ➔

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
  - 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

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

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

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

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

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

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

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
| 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" />

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

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

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

<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>

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

<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
| 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

<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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 50

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (3) 🔗