通过 
搜索
搜索maxyc / laravel-adminlte-components
Laravel Blade 组件，用于 AdminLTE 3 Bootstrap 4 管理模板
0.0.1
2021-02-23 12:53 UTC
Requires
- php: 8.*
This package is auto-updated.
Last update: 2024-09-23 20:51:59 UTC
README
此包包含用于 Laravel Blade 组件 的 AdminLTE 3 免费Bootstrap管理面板UI套件。由于blade组件仅在Laravel 7之后可用，因此只有laravel 7.x+可以使用此包。
此包是从 https://github.com/dgvai/laravel-adminlte-components/ 分支出来的。修复了错误并更新到php 8
内容
安装
您可以通过 composer 安装此包
composer require maxyc/laravel-adminlte-components
提取插件
php artisan vendor:publish --tag=maxyc-adminlte-plugins
配置
您可以使用此包，独立于已安装在您的应用程序中的 AdminLTE。您只需在 master blade 布局底部添加一个 @yield('js')。
或者，如果您使用 jeroennoten/Laravel-AdminLTE 包，那么您不需要在 master 中添加任何内容。我更愿意使用这个包。
在 jeroennoten/Laravel-AdminLTE 配置中使用此包
[
'name' => 'AdminLTE-Components-Maxyc',
'active' => true,
'files' => [
[
'type' => 'css',
'asset' => true,
'location' => '/vendor/adminlte-plugins/select2/css/select2.min.css',
],
[
'type' => 'css',
'asset' => true,
'location' => '/vendor/adminlte-plugins/select2/css/select2-bootstrap4.min.css',
],
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/adminlte-plugins/select2/js/select2.min.js',
],
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/adminlte-plugins/bs-custom-file-input/bs-custom-file-input.min.js',
],
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/adminlte-plugins/moment/moment.min.js',
],
[
'type' => 'css',
'asset' => true,
'location' => '/vendor/adminlte-plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css',
],
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/adminlte-plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js',
],
[
'type' => 'css',
'asset' => true,
'location' => '/vendor/adminlte-plugins/summernote/summernote-bs4.css',
],
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/adminlte-plugins/summernote/summernote-bs4.min.js',
],
[
'type' => 'css',
'asset' => true,
'location' => '/vendor/adminlte-plugins/bs-select/css/bootstrap-select.min.css',
],
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/adminlte-plugins/bs-select/js/bootstrap-select.min.js',
],
[
'type' => 'css',
'asset' => true,
'location' => '/vendor/adminlte-plugins/bootstrap-tags-input/bootstrap-tagsinput.css',
],
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/adminlte-plugins/bootstrap-tags-input/bootstrap-tagsinput.js',
],
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/adminlte-plugins/daterangepicker/daterangepicker.js',
],
[
'type' => 'css',
'asset' => true,
'location' => '/vendor/adminlte-plugins/daterangepicker/daterangepicker.css',
],
[
'type' => 'css',
'asset' => true,
'location' => '/vendor/adminlte-plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css',
],
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/adminlte-plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js',
],
[
'type' => 'css',
'asset' => true,
'location' => '/vendor/adminlte-plugins/bootstrap-slider/css/bootstrap-slider.min.css',
],
[
'type' => 'js',
'asset' => true,
'location' => '/vendor/adminlte-plugins/bootstrap-slider/js/bootstrap-slider.min.js',
],
],
],
组件
小部件
信息框
最小使用
<x-adminlte-info-box title="Order" text="12" />
所有可用属性
示例
<x-adminlte-info-box bg="success" title="Yo title" text="123" icon="fas fa-star" :full="true" :grad="true"/>
动态绑定
设置 id 属性，这将启用动态属性
示例
<x-adminlte-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>
小框
最小使用
<x-adminlte-small-box title="New User" text="500" />
所有可用属性
示例
<x-adminlte-small-box title="Small box" text="500" bg="warning" url="#" urlText="See More" loading="false" />
动态绑定
设置 id 属性，这将启用动态属性
示例
<x-adminlte-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>
卡片
最小使用
<x-adminlte-card title="Title"> ... </x-adminlte-card>
所有可用属性
示例
<x-adminlte-card title="Title" bg="primary" :outline="true" :full="true" :collapsed="false" :maximizable="true" :removable="true" :disabled="false"> ... </x-adminlte-card>
警报
最小使用
<x-adminlte-alert title="Alert!"> This is alert </x-adminlte-alert>
所有可用属性
示例
<x-adminlte-alert type="danger" title="Error!" :dismissable="true"> This is alert </x-adminlte-alert>
调用
最小使用
<x-adminlte-callout>This is callout</x-adminlte-callout>
所有可用属性
示例
<x-adminlte-callout type="warning" title="Oops!"> This is callout </x-adminlte-callout>
进度条
最小使用
<x-adminlte-progress value="56"/>
所有可用属性
示例
<x-adminlte-progress value="56" bg="danger" size="sm" :stripped="true" :vertical="false"/>
扁平化个人资料
用法
<x-adminlte-profile-flat img="https://via.placeholder.com/150" name="Nadia Carmicheal" desc="Lead Developer"> <x-adminlte-profile-flat-item title="Projects" text="31" url="#" badge="primary"/> <x-adminlte-profile-flat-item title="Tasks" text="5" /> <x-adminlte-profile-flat-item title="Completed Projects" text="12" badge="success" /> <x-adminlte-profile-flat-item title="Followers" text="842" badge="danger" /> </x-adminlte-profile-flat>
个人资料小部件
用法
<x-adminlte-profile-widget img="https://via.placeholder.com/150" name="Alexander Prince" desc="Founder CEO" bg="info"> <x-adminlte-profile-widget-item title="followers" text="533"/> <x-adminlte-profile-widget-item title="sales" text="20" col="4"/> <x-adminlte-profile-widget-item title="inbox" text="0"/> </x-adminlte-profile-widget> <x-adminlte-profile-widget img="https://via.placeholder.com/150" name="Elizabeth Pierce" desc="Founder CEO" cover="https://via.placeholder.com/150"> <x-adminlte-profile-widget-item title="followers" text="533"/> <x-adminlte-profile-widget-item title="sales" text="20" col="4"/> <x-adminlte-profile-widget-item title="inbox" text="0"/> </x-adminlte-profile-widget>
模态框
最小使用
<x-adminlte-modal id="login_modal" title="Modal Title"> ... </x-adminlte-modal>
所有可用属性
示例
<x-adminlte-modal id="login_modal" title="Modal Title" size="sm" :centered="true" index="1"> ... </x-adminlte-modal>
数据表
最小使用
<x-adminlte-datatable id="sales-table" :heads="['#','Name','Phone','Actions']"/> ... <script> $(()=>{ $('#sales-table').Datatable({ ... ... }); }); </script>
所有可用属性
致谢：在按钮使用时使用 Dom : 'Blftrip'。请参阅示例以了解更多信息！
表单组件
输入
用法
<x-adminlte-input />
所有可用属性
文件输入
需要
bs-custom-file-input.min.js
用法
<x-adminlte-input-file />
所有可用属性
颜色输入
用法
<x-adminlte-input-color id="myID" />
所有可用属性
日期输入
用法
<x-adminlte-input-date id="myID" />
所有可用属性
日期范围
用法
<x-adminlte-date-range id="picker" callback="console.log('this is callback function')" />
所有可用属性
* 初始化
0 - 今天
1 - 昨天
2 - 过去7天
3 - 过去30天
4 - 本月
5 - 上个月
开关输入
用法
<x-adminlte-input-switch/>
所有可用属性
标签输入
用法
<x-adminlte-input-tag/>
所有可用属性
滑动输入
用法
<x-adminlte-input-slider id="myID"/>
所有可用属性
选择
用法
<x-adminlte-select id="myID"> <x-adminlte-option value="val">Text</x-adminlte-option> </x-adminlte-select>
所有可用属性：选择
所有可用属性：选项
选择2
需要
select2
用法
<x-adminlte-select2 id="myID"> <x-adminlte-option value="val">Text</x-adminlte-option> </x-adminlte-select2>
所有可用属性：选择
所有可用属性：选项
选择图标
用法
<x-adminlte-select-icon id="myID"> <x-adminlte-option value="val" icon="true" content="fas fa-star">Text</x-adminlte-option> </x-adminlte-select-icon>
所有可用属性：选择
所有可用属性：选项
文本区域
用法
<x-adminlte-textarea>Hi,,,</x-adminlte-textarea>
所有可用属性
文本编辑器
需要
summernote
用法
<x-adminlte-text-editor id="myEditor"/>
所有可用属性
示例字体数组
$fonts = ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Impact', 'Montserrat', 'Open Sans'];
提交
<x-adminlte-submit />
所有可用属性
示例代码
您可以从 examples 目录中浏览高级用法的示例。
摘要
此文档可能没有很好地记录。我将非常乐意接受任何文档拉取请求。
新组件的拉取请求应在非 master 分支中
变更日志
有关最近更改的更多信息，请参阅 CHANGELOG
许可证
MIT 许可证 (MIT)。有关更多信息，请参阅 许可证文件