gai/django-adminlte-components

Laravel Blade 组件，适用于 AdminLTE Bootstrap 管理模板

维护者

详细信息

github.com/dgvai/laravel-adminlte-components

源代码

问题

安装数量: 3,485

依赖: 0

建议者: 0

安全: 0

星级: 71

关注者: 7

分支: 17

公开问题: 5

语言：JavaScript

类型：laravel-package

2.1.2 2020-07-25 05:58 UTC

MIT d0c91d51251f25278fba95dde378bc4fa82e33e2

  • Jalal Uddin <dgvai.woop@users.noreply.github.com>

This package is auto-updated.

Last update: 2024-08-29 05:43:18 UTC

README

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

本包包含适用于 Laravel Blade 组件 的 AdminLTE 3 免费Bootstrap管理面板UI工具包。由于blade组件只在Laravel 7及以上版本中可用，因此仅支持laravel 7.x+使用此包。

内容

安装

您可以通过composer安装此包

    composer require dgvai/laravel-adminlte-components

提取插件

    php artisan vendor:publish --tag=adminlte-dg-plugins

配置

您可以使用此包，独立于AdminLTE安装在您的应用中。您只需在您的 master blade布局底部添加一个 @yield('js')。

或者，如果您使用jeroennoten/Laravel-AdminLTE包，则无需在master中添加任何内容。我更愿意使用这个包。

在jeroennoten/Laravel-AdminLTE配置中使用此功能

        [
            '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',
                ],
            ],
        ],

组件

小部件

信息框

Info Box
Info Box Full

最小使用

<x-dg-info-box title="Order" text="12" />

所有可用属性

示例

<x-dg-info-box bg="success" title="Yo title" text="123" icon="fas fa-star" :full="true" :grad="true"/>

动态绑定
设置id属性，这将启用动态属性

示例

<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

最小使用

<x-dg-small-box title="New User" text="500" />

所有可用属性

示例

<x-dg-small-box title="Small box" text="500" bg="warning" url="#" urlText="See More" loading="false" />

动态绑定
设置id属性，这将启用动态属性

示例

<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

最小使用

<x-dg-card title="Title">
    ...
</x-dg-card>

所有可用属性

示例

<x-dg-card title="Title" bg="primary" :outline="true" :full="true" :collapsed="false" :maximizable="true"           :removable="true" :disabled="false">
    ...
</x-dg-card>

警报

Alerts

最小使用

<x-dg-alert title="Alert!">
    This is alert
</x-dg-alert>

所有可用属性

示例

<x-dg-alert type="danger" title="Error!" :dismissable="true">
    This is alert
</x-dg-alert>

呼叫

Alerts

最小使用

<x-dg-callout>This is callout</x-dg-callout>

所有可用属性

示例

<x-dg-callout type="warning" title="Oops!">
    This is callout
</x-dg-callout>

进度条

Alerts

最小使用

<x-dg-progress value="56"/>

所有可用属性

示例

<x-dg-progress value="56" bg="danger" size="sm" :stripped="true" :vertical="false"/>

扁平化个人资料

Alerts

用法

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

个人资料小部件

Alerts

用法

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

模态框

最小使用

<x-dg-modal id="login_modal" title="Modal Title">
    ...
</x-dg-modal>

所有可用属性

示例

<x-dg-modal id="login_modal" title="Modal Title" size="sm" :centered="true" index="1">
    ...
</x-dg-modal>

数据表

最小使用

<x-dg-datatable id="sales-table" :heads="['#','Name','Phone','Actions']"/>
...

<script>
$(()=>{
   $('#sales-table').Datatable({
       ...
       ...
   });
});
</script>

所有可用属性

致谢 使用按钮时请使用Dom : 'Blftrip'。请参阅示例以获得更清晰的说明！

表单组件

输入

用法

<x-dg-input />

所有可用属性

文件输入

要求
bs-custom-file-input.min.js

用法

<x-dg-input-file />

所有可用属性

颜色输入

要求
bootstrap-colorpicker

用法

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

所有可用属性

日期输入

要求
tempusdominus-bootstrap-4

用法

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

所有可用属性

日期范围

要求
datetimepicker

用法

<x-dg-date-range id="picker" callback="console.log('this is callback function')" />

所有可用属性

* 初始化
0 - 今天
1 - 昨天
2 - 过去7天
3 - 过去30天
4 - 本月
5 - 上个月

开关输入

要求
bootstrap-switch

用法

<x-dg-input-switch/>

所有可用属性

标签输入

要求
bootstrap-tagsinput

用法

<x-dg-input-tag/>

所有可用属性

滑动输入

要求
bootstrap-slider

用法

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

所有可用属性

选择

用法

<x-dg-select id="myID">
    <x-dg-option value="val">Text</x-dg-option>
</x-dg-select>

所有可用属性：选择

所有可用属性：选项

选择2

要求
select2

用法

<x-dg-select2 id="myID">
    <x-dg-option value="val">Text</x-dg-option>
</x-dg-select2>

所有可用属性：选择

所有可用属性：选项

选择图标

要求
bootstrap-select

用法

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

所有可用属性：选择

所有可用属性：选项

文本区域

用法

<x-dg-textarea>Hi,,,</x-dg-textarea>

所有可用属性

文本编辑器

要求
summernote

用法

<x-dg-text-editor id="myEditor"/>

所有可用属性

示例字体数组

    $fonts = ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Impact', 'Montserrat',  'Open Sans'];

提交

<x-dg-submit />

所有可用属性

示例代码

您可以从examples目录中浏览高级用法的示例。

摘要

此文档可能不是很好，我将非常乐意接受任何文档pull-requests。

对于新组件的pull-requests应该在非master分支上

更新日志

请参阅更新日志以获取有关最近更改的更多信息。

许可

MIT许可证（MIT）。请参阅许可文件以获取更多信息。