{"id":33951876,"url":"https://github.com/dgvai/laravel-adminlte-components","last_synced_at":"2026-03-17T22:06:17.329Z","repository":{"id":54586595,"uuid":"263046930","full_name":"dgvai/laravel-adminlte-components","owner":"dgvai","description":"Laravel Blade Components For AdminLTE Bootstrap Admin Template","archived":false,"fork":false,"pushed_at":"2021-02-03T13:08:29.000Z","size":476,"stargazers_count":74,"open_issues_count":5,"forks_count":15,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-12-14T07:52:57.871Z","etag":null,"topics":["adminlte","adminlte-component","blade-components","laravel","laravel-adminlte","laravel-blade","laravel-blade-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dgvai.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-11T13:14:18.000Z","updated_at":"2025-11-04T14:03:46.000Z","dependencies_parsed_at":"2022-08-13T20:31:36.878Z","dependency_job_id":null,"html_url":"https://github.com/dgvai/laravel-adminlte-components","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/dgvai/laravel-adminlte-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgvai%2Flaravel-adminlte-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgvai%2Flaravel-adminlte-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgvai%2Flaravel-adminlte-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgvai%2Flaravel-adminlte-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dgvai","download_url":"https://codeload.github.com/dgvai/laravel-adminlte-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgvai%2Flaravel-adminlte-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30633240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-17T17:32:55.572Z","status":"ssl_error","status_checked_at":"2026-03-17T17:32:38.732Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adminlte","adminlte-component","blade-components","laravel","laravel-adminlte","laravel-blade","laravel-blade-component"],"created_at":"2025-12-12T19:10:51.258Z","updated_at":"2026-03-17T22:06:17.316Z","avatar_url":"https://github.com/dgvai.png","language":"JavaScript","readme":"# AdminLTE Blade Components for Laravel 7+\n\n[![Latest Stable Version](https://poser.pugx.org/dgvai/laravel-adminlte-components/v/stable)](https://packagist.org/packages/dgvai/laravel-adminlte-components)\n[![Total Downloads](https://poser.pugx.org/dgvai/laravel-adminlte-components/downloads)](https://packagist.org/packages/dgvai/laravel-adminlte-components)\n[![Latest Unstable Version](https://poser.pugx.org/dgvai/laravel-adminlte-components/v/unstable)](https://packagist.org/packages/dgvai/laravel-adminlte-components)\n[![License](https://poser.pugx.org/dgvai/laravel-adminlte-components/license)](https://packagist.org/packages/dgvai/laravel-adminlte-components)\n[![Monthly Downloads](https://poser.pugx.org/dgvai/laravel-adminlte-components/d/monthly)](https://packagist.org/packages/dgvai/laravel-adminlte-components)\n[![Daily Downloads](https://poser.pugx.org/dgvai/laravel-adminlte-components/d/daily)](https://packagist.org/packages/dgvai/laravel-adminlte-components)\n[![composer.lock](https://poser.pugx.org/dgvai/laravel-adminlte-components/composerlock)](https://packagist.org/packages/dgvai/laravel-adminlte-components)\n\nThis 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.\n\n## Contents\n\n\u003c!-- TOC --\u003e\n\n- [AdminLTE Blade Components for Laravel 7+](#adminlte-blade-components-for-laravel-7)\n    - [Contents](#contents)\n    - [Installation](#installation)\n    - [Extract Plugins](#extract-plugins)\n    - [Configurations](#configurations)\n    - [Components](#components)\n        - [Widgets](#widgets)\n            - [**INFO BOX**](#info-box)\n            - [**SMALL BOX**](#small-box)\n            - [**CARDS**](#cards)\n            - [**ALERT**](#alert)\n            - [**CALLOUT**](#callout)\n            - [**PROGRESS**](#progress)\n            - [**PROFILE FLAT**](#profile-flat)\n            - [**PROFILE WIDGET**](#profile-widget)\n            - [**MODAL**](#modal)\n            - [**DATATABLE**](#datatable)\n        - [Form Components](#form-components)\n            - [INPUT](#input)\n            - [INPUT-FILE](#input-file)\n            - [INPUT-COLOR](#input-color)\n            - [INPUT-DATE](#input-date)\n            - [DATE-RANGE](#date-range)\n            - [INPUT-SWITCH](#input-switch)\n            - [INPUT-TAG](#input-tag)\n            - [INPUT-SLIDER](#input-slider)\n            - [SELECT](#select)\n            - [SELECT2](#select2)\n            - [SELECT-ICON](#select-icon)\n            - [TEXTAREA](#textarea)\n            - [TEXT-EDITOR](#text-editor)\n            - [SUBMIT](#submit)\n    - [Example Codes](#example-codes)\n    - [Summary](#summary)\n    - [Changelog](#changelog)\n    - [License](#license)\n\n\u003c!-- /TOC --\u003e\n\n## Installation\n\nYou can install the package via composer:\n\n``` bash\n    composer require dgvai/laravel-adminlte-components\n```\n\n## Extract Plugins\n``` bash\n    php artisan vendor:publish --tag=adminlte-dg-plugins\n```\n\n## Configurations\nYou 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 \u003ckbd\u003emaster\u003c/kbd\u003e blade layout.\n\nOr, 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.\n\nUse this in the [jeroennoten/Laravel-AdminLTE](https://github.com/jeroennoten/Laravel-AdminLTE) config: \n```php \n        [\n            'name' =\u003e 'AdminLTE-Components-DG',\n            'active' =\u003e true,\n            'files' =\u003e [\n                [\n                    'type' =\u003e 'css',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/select2/css/select2.min.css',\n                ],\n                [\n                    'type' =\u003e 'css',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/select2/css/select2-bootstrap4.min.css',\n                ],\n                [\n                    'type' =\u003e 'js',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/select2/js/select2.min.js',\n                ],\n                [\n                    'type' =\u003e 'js',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/bs-custom-file-input/bs-custom-file-input.min.js',\n                ],\n                [\n                    'type' =\u003e 'js',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/moment/moment.min.js',\n                ],\n                [\n                    'type' =\u003e 'css',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css',\n                ],\n                [\n                    'type' =\u003e 'js',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js',\n                ],\n                [\n                    'type' =\u003e 'css',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/summernote/summernote-bs4.css',\n                ],\n                [\n                    'type' =\u003e 'js',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/summernote/summernote-bs4.min.js',\n                ],\n                [\n                    'type' =\u003e 'css',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/bs-select/css/bootstrap-select.min.css',\n                ],\n                [\n                    'type' =\u003e 'js',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/bs-select/js/bootstrap-select.min.js',\n                ],\n                [\n                    'type' =\u003e 'css',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/bootstrap-tags-input/bootstrap-tagsinput.css',\n                ],\n                [\n                    'type' =\u003e 'js',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/bootstrap-tags-input/bootstrap-tagsinput.js',\n                ],\n                [\n                    'type' =\u003e 'js',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/daterangepicker/daterangepicker.js',\n                ],\n                [\n                    'type' =\u003e 'css',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/daterangepicker/daterangepicker.css',\n                ],\n                [\n                    'type' =\u003e 'css',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css',\n                ],\n                [\n                    'type' =\u003e 'js',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js',\n                ],\n                [\n                    'type' =\u003e 'css',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/bootstrap-slider/css/bootstrap-slider.min.css',\n                ],\n                [\n                    'type' =\u003e 'js',\n                    'asset' =\u003e true,\n                    'location' =\u003e '/vendor/dg-plugins/bootstrap-slider/js/bootstrap-slider.min.js',\n                ],\n            ],\n        ],\n\n```\n\n## Components\n\n### Widgets\n\n#### **INFO BOX**  \n![Info Box](assets/info-box.png)  \n![Info Box Full](assets/info-box-full.png)  \n\n**MINIMUM USAGE**  \n```html\n\u003cx-dg-info-box title=\"Order\" text=\"12\" /\u003e\n```\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE | DETAILS                                                                                    | REQUIRED | TYPE    |\n|-----------|--------------------------------------------------------------------------------------------|----------|---------|\n| title     | Title of the info box                                                                      | true     | string  |\n| text      | Data text                                                                                  | true     | string  |\n| bg        | Background Color of the icon. This follows bootstrap colors: success, info, primary... etc | false    | string  |\n| icon      | The fontawesome icon class. Eg. ``fas fa-star``, ``fas fa-user-plus``                      | false    | string  |\n| grad      | Use gradient color? ``true/false``                                                         | false    | boolean |\n| full      | Use full INFO BOX? ``true/false``                                                          | false    | boolean |\n| progress      | Show Progress bar?                                                          | false    | int |\n| comment      | Show comment?                                                           | false    | string |\n| id      | Dynamic Binding?                                                          | false    | string |\n\n**EXAMPLE**\n```html\n\u003cx-dg-info-box bg=\"success\" title=\"Yo title\" text=\"123\" icon=\"fas fa-star\" :full=\"true\" :grad=\"true\"/\u003e\n```\n\n**DYNAMIC BINDINGS**  \nSet ``id`` attibute, this will enable dynamic attributes for:\n| ID |\n|----|\n|#{id}-title|\n|#{id}-text|\n|#{id}-progress|\n|#{id}-comment|\n\n**EXAMPLE**\n```html\n\u003cx-dg-info-box bg=\"success\" title=\"Users\" text=\"100\" icon=\"fas fa-star\" :full=\"true\" :grad=\"true\" id=\"userbox\" /\u003e\n\n\u003cscript\u003e\n    $(()=\u003e{\n        $('#userbox-title').text('Users');\n        $('#userbox-text').text('102');\n    });\n\u003c/script\u003e\n```\n\n\n#### **SMALL BOX**  \n![Small Box](assets/small-box.png)\n\n**MINIMUM USAGE**  \n```html\n\u003cx-dg-small-box title=\"New User\" text=\"500\" /\u003e\n```\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE | DETAILS                                                                                    | REQUIRED | TYPE    |\n|-----------|--------------------------------------------------------------------------------------------|----------|---------|\n| title     | Title of the info box                                                                      | true     | string  |\n| text      | Data text                                                                                  | true     | string  |\n| bg        | Background Color of the icon. This follows bootstrap colors: success, info, primary... etc | false    | string  |\n| icon      | The fontawesome icon class. Eg. ``fas fa-star``, ``fas fa-user-plus``                      | false    | string  |\n| url       | The url to follow.                                                                         | false    | string  |\n| urlText   | Text of the HyperLink.                                                                     | false    | string  |\n| loading   | Set loading state ``true/false``                                                           | false    | boolean |\n| id      | Dynamic Binding?                                                          | false    | string |\n\n**EXAMPLE**\n```html\n\u003cx-dg-small-box title=\"Small box\" text=\"500\" bg=\"warning\" url=\"#\" urlText=\"See More\" loading=\"false\" /\u003e\n```\n\n**DYNAMIC BINDINGS**  \nSet ``id`` attibute, this will enable dynamic attributes for:\n| ID |\n|----|\n|#{id}-title|\n|#{id}-text|\n|#{id}-link|\n\n**EXAMPLE**\n```html\n\u003cx-dg-small-box title=\"Small box\" text=\"500\" bg=\"warning\" url=\"#\" urlText=\"See More\" loading=\"false\" id=\"userbox\"/\u003e\n\n\u003cscript\u003e\n    $(()=\u003e{\n        $('#userbox-text').text('102');\n        $('#userbox-link').attr('href',new.link);\n    });\n\u003c/script\u003e\n```\n\n#### **CARDS**  \n![Cards](assets/cards.png)\n\n**MINIMUM USAGE**  \n```html\n\u003cx-dg-card title=\"Title\"\u003e\n    ...\n\u003c/x-dg-card\u003e\n```\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                                                                                    | REQUIRED | TYPE    |\n|-------------|--------------------------------------------------------------------------------------------|----------|---------|\n| title       | Title of the Card                                                                          | true     | string  |\n| bg          | Background Color of the icon. This follows bootstrap colors: success, info, primary... etc | false    | string  |\n| collapsed   | Is Collapsed? ``true/false``                                                               | false    | boolean |\n| removable   | Is removable? ``true/false``                                                               | false    | boolean |\n| maximizable | Is maximizable? ``true/false``                                                             | false    | boolean |\n| disabled    | Is disabled? ``true/false``                                                                | false    | boolean |\n| outline     | Is outlined? ``true/false``                                                                | false    | boolean |\n| full        | Is full background? ``true/false``                                                         | false    | boolean |\n\n**EXAMPLE**\n```html\n\u003cx-dg-card title=\"Title\" bg=\"primary\" :outline=\"true\" :full=\"true\" :collapsed=\"false\" :maximizable=\"true\"           :removable=\"true\" :disabled=\"false\"\u003e\n    ...\n\u003c/x-dg-card\u003e\n```\n\n#### **ALERT**  \n![Alerts](assets/alert.png)\n\n**MINIMUM USAGE**  \n```html\n\u003cx-dg-alert title=\"Alert!\"\u003e\n    This is alert\n\u003c/x-dg-alert\u003e\n```\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                                                       | REQUIRED | TYPE    |\n|-------------|---------------------------------------------------------------|----------|---------|\n| title       | Title of the Alert                                            | true     | string  |\n| type        | Type of alert. Boostrap types: success, info, primary,... etc | false    | string  |\n| dismissable | Is the alert dismissable? ``true/false``                      | false    | boolean |\n\n**EXAMPLE**\n```html\n\u003cx-dg-alert type=\"danger\" title=\"Error!\" :dismissable=\"true\"\u003e\n    This is alert\n\u003c/x-dg-alert\u003e\n```\n\n#### **CALLOUT**  \n![Alerts](assets/callout.png)\n\n**MINIMUM USAGE**  \n```html\n\u003cx-dg-callout\u003eThis is callout\u003c/x-dg-callout\u003e\n```\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE | DETAILS                                                       | REQUIRED | TYPE   |\n|-----------|---------------------------------------------------------------|----------|--------|\n| title     | Title of the Callout                                          | false    | string |\n| type      | Type of alert. Boostrap types: success, info, primary,... etc | false    | string |\n\n**EXAMPLE**\n```html\n\u003cx-dg-callout type=\"warning\" title=\"Oops!\"\u003e\n    This is callout\n\u003c/x-dg-callout\u003e\n```\n\n#### **PROGRESS**  \n![Alerts](assets/progress.png)\n\n**MINIMUM USAGE**  \n```html\n\u003cx-dg-progress value=\"56\"/\u003e\n```\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE | DETAILS                                                             | REQUIRED | TYPE    |\n|-----------|---------------------------------------------------------------------|----------|---------|\n| bg        | Type of background. Boostrap backgd: success, info, primary,... etc | false    | string  |\n| size      | Size or progress bar: sm, xs, xxs                                   | false    | string  |\n| value     | Value of progress.                                                  | true     | numeric |\n| stripped  | Is stripped design? ``true/false``                                  | false    | boolean |\n| vertical  | Is vertical? ``true/false``                                         | false    | boolean |\n\n**EXAMPLE**\n```html\n\u003cx-dg-progress value=\"56\" bg=\"danger\" size=\"sm\" :stripped=\"true\" :vertical=\"false\"/\u003e\n```\n\n#### **PROFILE FLAT**  \n![Alerts](assets/prof-1.png)\n\n**USAGE**  \n```html\n\u003cx-dg-profile-flat img=\"https://via.placeholder.com/150\" name=\"Nadia Carmicheal\" desc=\"Lead Developer\"\u003e\n    \u003cx-dg-profile-flat-item title=\"Projects\" text=\"31\" url=\"#\" badge=\"primary\"/\u003e\n    \u003cx-dg-profile-flat-item title=\"Tasks\" text=\"5\" /\u003e\n    \u003cx-dg-profile-flat-item title=\"Completed Projects\" text=\"12\" badge=\"success\" /\u003e\n    \u003cx-dg-profile-flat-item title=\"Followers\" text=\"842\" badge=\"danger\" /\u003e\n\u003c/x-dg-profile-flat\u003e\n```\n\n#### **PROFILE WIDGET**  \n![Alerts](assets/prof-23.png)\n\n**USAGE**  \n```html\n\u003cx-dg-profile-widget img=\"https://via.placeholder.com/150\" name=\"Alexander Prince\" desc=\"Founder CEO\" bg=\"info\"\u003e\n    \u003cx-dg-profile-widget-item title=\"followers\" text=\"533\"/\u003e\n    \u003cx-dg-profile-widget-item title=\"sales\" text=\"20\" col=\"4\"/\u003e\n    \u003cx-dg-profile-widget-item title=\"inbox\" text=\"0\"/\u003e\n\u003c/x-dg-profile-widget\u003e\n\n\u003cx-dg-profile-widget img=\"https://via.placeholder.com/150\" name=\"Elizabeth Pierce\" desc=\"Founder CEO\" cover=\"https://via.placeholder.com/150\"\u003e\n    \u003cx-dg-profile-widget-item title=\"followers\" text=\"533\"/\u003e\n    \u003cx-dg-profile-widget-item title=\"sales\" text=\"20\" col=\"4\"/\u003e\n    \u003cx-dg-profile-widget-item title=\"inbox\" text=\"0\"/\u003e\n\u003c/x-dg-profile-widget\u003e\n```\n\n#### **MODAL**  \n\n**MINIMUM USAGE**  \n```html\n\u003cx-dg-modal id=\"login_modal\" title=\"Modal Title\"\u003e\n    ...\n\u003c/x-dg-modal\u003e\n```\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE | DETAILS                            | REQUIRED | TYPE    |\n|-----------|------------------------------------|----------|---------|\n| id        | ID of modal                        | true     | string  |\n| title     | Title of modal                     | true     | string  |\n| size      | modal size: sm,lg,fluid            | false    | string  |\n| centered  | is centered? ``true/false``        | false    | boolean |\n| index     | No of index. (Modal up on a modal) | false    | integer |\n\n**EXAMPLE**\n```html\n\u003cx-dg-modal id=\"login_modal\" title=\"Modal Title\" size=\"sm\" :centered=\"true\" index=\"1\"\u003e\n    ...\n\u003c/x-dg-modal\u003e\n```\n\n#### **DATATABLE**  \n\n**MINIMUM USAGE**  \n```html\n\u003cx-dg-datatable id=\"sales-table\" :heads=\"['#','Name','Phone','Actions']\"/\u003e\n...\n\n\u003cscript\u003e\n$(()=\u003e{\n   $('#sales-table').Datatable({\n       ...\n       ...\n   });\n});\n\u003c/script\u003e\n```\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE | DETAILS                       | REQUIRED | TYPE    |\n|-----------|-------------------------------|----------|---------|\n| id        | ID of the table               | true     | string  |\n| heads     | Array of the headings (thead) | true     | array   |\n| beautify  | to beautify? ``true/false``   | false    | boolean |\n| bordered  | is bordered? ``true/false``   | false    | boolean |\n| hoverable | is hoverable? ``true/false``  | false    | boolean |\n| condensed | is condensed? ``true/false``  | false    | boolean |\n| footer    | has footer? ``true/false``    | false    | boolean |\n| buttons    | has buttons (print/export)? ``true/false``    | false    | boolean |\n\n**ACKNOWLEDGEMENTS**\nUse ``Dom : 'Blftrip'`` while using buttons. See Examples to be more clear!\n\n### Form Components\n\n#### INPUT\n**USAGE**\n```html\n\u003cx-dg-input /\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| type        | Input Type                      | text        | string  |\n| id          | Input ID                        | null        | string  |\n| name        | Input name                      | null        | string  |\n| label       | Input Label                     | Input Label | string  |\n| placeholder | Input placeholder               | null        | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass  | class along with 'form-control' | null        | string  |\n| value       | Input value                     | null        | string  |\n| disabled    | is disabled?                    | false       | boolean |\n| required    | is required?                    | false       | boolean |\n| step    | HTML Attr: step                    | false       | int |\n| max    | HTML Attr: max                    | false       | int |\n| maxlength    | HTML Attr: maxlength                    | false       | int |\n| pattern    | HTML Attr: pattern                    | false       | regex |\n\n#### INPUT-FILE\n**REQUIRES**  \n[bs-custom-file-input.min.js](https://www.npmjs.com/package/bs-custom-file-input)  \n\n**USAGE**\n```html\n\u003cx-dg-input-file /\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| id          | Input ID                        | null        | string  |\n| name        | Input name                      | null        | string  |\n| label       | Input Label                     | Input Label | string  |\n| placeholder | Input placeholder               | null        | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass  | class along with 'form-control' | null        | string  |\n| value       | Input value                     | null        | string  |\n| disabled    | is disabled?                    | false       | boolean |\n| required    | is required?                    | false       | boolean |\n| multiple    | is multiple?                    | false       | boolean |\n\n#### INPUT-COLOR\n**REQUIRES**  \n[bootstrap-colorpicker](https://www.npmjs.com/package/bootstrap-colorpicker)  \n\n**USAGE**\n```html\n\u003cx-dg-input-color id=\"myID\" /\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| id          | Input ID                        | null        | string  |\n| name        | Input name                      | null        | string  |\n| label       | Input Label                     | Input Label | string  |\n| placeholder | Input placeholder               | null        | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass  | class along with 'form-control' | null        | string  |\n| value       | Input value                     | null        | string  |\n| disabled    | is disabled?                    | false       | boolean |\n| required    | is required?                    | false       | boolean |\n\n#### INPUT-DATE\n**REQUIRES**  \n[tempusdominus-bootstrap-4](https://tempusdominus.github.io/bootstrap-4/)  \n\n**USAGE**\n```html\n\u003cx-dg-input-date id=\"myID\" /\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| id          | Input ID                        | null        | string  |\n| name        | Input name                      | null        | string  |\n| label       | Input Label                     | Input Label | string  |\n| placeholder | Input placeholder               | null        | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass  | class along with 'form-control' | null        | string  |\n| value       | Input value                     | null        | string  |\n| disabled    | is disabled?                    | false       | boolean |\n| required    | is required?                    | false       | boolean |\n| format      | [Moment.js](https://momentjs.com/docs/#/displaying/format/) datetime format       | YYYY-MM-DD  | string  |\n\n#### DATE-RANGE\n**REQUIRES**  \n[datetimepicker](https://www.daterangepicker.com/) \n\n**USAGE**\n```html\n\u003cx-dg-date-range id=\"picker\" callback=\"console.log('this is callback function')\" /\u003e\n```\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| id          | Input ID                        | null        | string  |\n| title       | Input Title                     | Filter Range        | string  |\n| icon        | Icon                            | far fa-calendar-alt | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass    | class along with 'filter button'   | null        | string  |\n| init   | The initial position of range, (0-5) * | 2        | integer  |\n| callback  | The JS callback function to run on change filter | null | string (js)  |\n\n**\\* init**  \n0 - Today  \n1 - Yesterday  \n2 - Last 7 Days  \n3 - Last 30 Days  \n4 - This Month  \n5 - Last Month  \n\n\n#### INPUT-SWITCH\n**REQUIRES**  \n[bootstrap-switch](https://bttstrp.github.io/bootstrap-switch/)  \n\n**USAGE**\n```html\n\u003cx-dg-input-switch/\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| id          | Input ID                        | null        | string  |\n| name        | Input name                      | null        | string  |\n| label       | Input Label                     | Input Label | string  |\n| placeholder | Input placeholder               | null        | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass  | class along with 'form-control' | null        | string  |\n| disabled    | is disabled?                    | false       | boolean |\n| required    | is required?                    | false       | boolean |\n| checked     | is checked?                     | false       | boolean |\n\n#### INPUT-TAG\n**REQUIRES**  \n[bootstrap-tagsinput](https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/)  \n\n**USAGE**\n```html\n\u003cx-dg-input-tag/\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| id          | Input ID                        | null        | string  |\n| name        | Input name                      | null        | string  |\n| label       | Input Label                     | Input Label | string  |\n| placeholder | Input placeholder               | null        | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass  | class along with 'form-control' | null        | string  |\n| disabled    | is disabled?                    | false       | boolean |\n| required    | is required?                    | false       | boolean |\n| max         | max tag count                   | 10          | integer |\n\n#### INPUT-SLIDER\n**REQUIRES**  \n[bootstrap-slider](https://github.com/seiyria/bootstrap-slider)  \n\n**USAGE**\n```html\n\u003cx-dg-input-slider id=\"myID\"/\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| id          | Input ID                        | none        | string  |\n| name        | Input name                      | null        | string  |\n| label       | Input Label                     | Input Label | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass  | class along with 'form-control' | null        | string  |\n| disabled    | is disabled?                    | false       | boolean |\n| required    | is required?                    | false       | boolean |\n| min         | minimum                         | 0           | signed int |\n| max         | maximum                         | 100           | signed int |\n| value         | value                         | null           | string |\n| color         | blue, green, red, teal, yellow, purple | blue  | string |\n| tick         | Enable Tick? | false  | boolean |\n| ticks         | Ticks : [0, 10, 20, ...] | null  | string |\n| tickLabels         | Tick Labels : [\"low\", \"medium\", \"high\" ...] | null  | string |\n| vertical         | Is vertical? | false  | boolean |\n\n\n#### SELECT \n\n**USAGE**\n```html\n\u003cx-dg-select id=\"myID\"\u003e\n    \u003cx-dg-option value=\"val\"\u003eText\u003c/x-dg-option\u003e\n\u003c/x-dg-select\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES: SELECT**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| id          | Input ID                        | null        | string  |\n| name        | Input name                      | null        | string  |\n| label       | Input Label                     | Input Label | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass  | class along with 'form-control' | null        | string  |\n| disabled    | is disabled?                    | false       | boolean |\n| required    | is required?                    | false       | boolean |\n| multiple    | is multiple?                    | false       | boolean |\n\n**ALL AVAILABLE ATTRIBUTES: OPTION**  \n| ATTRIBUTE | DETAILS         | DEFAULT | TYPE    |\n|-----------|-----------------|---------|---------|\n| value     | value of option | null    | string  |\n| selected  | is selected?    | false   | boolean |\n| disabled  | is disabled?    | false   | boolean |\n\n#### SELECT2 \n**REQUIRES**  \n[select2](https://select2.org/)  \n\n**USAGE**\n```html\n\u003cx-dg-select2 id=\"myID\"\u003e\n    \u003cx-dg-option value=\"val\"\u003eText\u003c/x-dg-option\u003e\n\u003c/x-dg-select2\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES: SELECT**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| id          | Input ID                        | null        | string  |\n| name        | Input name                      | null        | string  |\n| label       | Input Label                     | Input Label | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass  | class along with 'form-control' | null        | string  |\n| disabled    | is disabled?                    | false       | boolean |\n| required    | is required?                    | false       | boolean |\n| multiple    | is multiple?                    | false       | boolean |\n\n**ALL AVAILABLE ATTRIBUTES: OPTION**  \n| ATTRIBUTE | DETAILS         | DEFAULT | TYPE    |\n|-----------|-----------------|---------|---------|\n| value     | value of option | null    | string  |\n| selected  | is selected?    | false   | boolean |\n| disabled  | is disabled?    | false   | boolean |\n\n#### SELECT-ICON \n**REQUIRES**  \n[bootstrap-select](https://developer.snapappointments.com/bootstrap-select/)  \n\n**USAGE**\n```html\n\u003cx-dg-select-icon id=\"myID\"\u003e\n    \u003cx-dg-option value=\"val\" icon=\"true\" content=\"fas fa-star\"\u003eText\u003c/x-dg-option\u003e\n\u003c/x-dg-select-icon\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES: SELECT**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| id          | Input ID                        | null        | string  |\n| name        | Input name                      | null        | string  |\n| label       | Input Label                     | Input Label | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass  | class along with 'form-control' | null        | string  |\n| disabled    | is disabled?                    | false       | boolean |\n| required    | is required?                    | false       | boolean |\n| multiple    | is multiple?                    | false       | boolean |\n\n**ALL AVAILABLE ATTRIBUTES: OPTION**  \n| ATTRIBUTE | DETAILS         | DEFAULT | TYPE    |\n|-----------|-----------------|---------|---------|\n| value     | value of option | null    | string  |\n| icon      | has icon?       | false   | boolean |\n| content   | icon class      | null    | string  |\n| selected  | is selected?    | false   | boolean |\n| disabled  | is disabled?    | false   | boolean |\n\n#### TEXTAREA \n\n**USAGE**\n```html\n\u003cx-dg-textarea\u003eHi,,,\u003c/x-dg-textarea\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| id          | Input ID                        | null        | string  |\n| name        | Input name                      | null        | string  |\n| label       | Input Label                     | Input Label | string  |\n| placeholder | Input placeholder               | null        | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass  | class along with 'form-control' | null        | string  |\n| disabled    | is disabled?                    | false       | boolean |\n| required    | is required?                    | false       | boolean |\n| rows        | textarea rows                   | 10          | integer |\n\n#### TEXT-EDITOR\n**REQUIRES**  \n[summernote](https://summernote.org/)  \n\n**USAGE**\n```html\n\u003cx-dg-text-editor id=\"myEditor\"/\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| id          | Input ID                        | null        | string  |\n| name        | Input name                      | null        | string  |\n| label       | Input Label                     | Input Label | string  |\n| placeholder | Input placeholder               | null        | string  |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| inputclass  | class along with 'form-control' | null        | string  |\n| disabled    | is disabled?                    | false       | boolean |\n| required    | is required?                    | false       | boolean |\n| body        | texteditor text body            | null        | long text |\n| height      | texteditor height               | 800         | integer |\n| fonts       | set custom fonts                | null        | array   |\n\n**Example Fonts Array**\n```php\n    $fonts = ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Impact', 'Montserrat',  'Open Sans'];\n```\n\n#### SUBMIT\n```html\n\u003cx-dg-submit /\u003e\n```\n\n**ALL AVAILABLE ATTRIBUTES**  \n| ATTRIBUTE   | DETAILS                         | DEFAULT     | TYPE    |\n|-------------|---------------------------------|-------------|---------|\n| type        | button type: success, primary, ...,etc | info    | string |\n| topclass    | class along with 'fomr-group'   | null        | string  |\n| label       | button label                           | Submit  | string |\n| icon        | button icon                     | fas fa-save  | string |\n| inputclass  | class along with 'form-control' | null        | string  |\n\n## Example Codes\nYou can browse through the examples of advanced usages from [examples](examples/) directory. \n\n## Summary\nThis document might not be well-documented. I will happily accept any documentation pull-requests.  \n\u003e PULL REQUESTS for new components should be in non-master branch\n\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgvai%2Flaravel-adminlte-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdgvai%2Flaravel-adminlte-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgvai%2Flaravel-adminlte-components/lists"}