README

将 AdminLTE 集成到您的 Laravel 应用程序中的简单方法。

简介
安装
覆盖 Laravel 认证视图
配置
Blade 模板（布局、组件和部分视图）
[可选] 覆盖默认视图
支持的插件

1. 简介

此包在底层依赖于其他包，这些包包括

2. 安装

您可以通过运行 composer 命令行安装 laravel-adminlte

composer require ahmed-aliraqi/laravel-adminlte

然后运行以下命令将模板资源添加到您的项目中。

php artisan adminlte:install

4. 配置

在第一步中发布配置文件后，将发布两个配置文件 config/adminlte.php 和 config/breadcrumbs.php。

<?php

// config/adminlte.php

return [
    'appearence' => [
        /*
         * Supported values are black, black-light, blue, blue-light,
         *  green, green-light, purple, purple-light,
         *  red, red-light, yellow and yello-light.
         */
        'skin' => 'red',
        /*
         * The direction of the dashboard.
         */
        'dir' => 'ltr',
        /*
         * The header items that will be rendered.
         */
        'header' => [
            'items' => [
                'adminlte::partials.header.messages',
                'adminlte::partials.header.notifications',
                'adminlte::partials.header.tasks',
                'adminlte::partials.header.user',
            ],
        ],
        /*
         * The sidebar items that will be rendered.
         */
        'sidebar' => [
            'items' => [
                'adminlte::partials.sidebar.user-panel',
                'adminlte::partials.sidebar.search-form',
                'adminlte::partials.sidebar.items',
            ],
        ],
    ],
    'urls' => [
        /*
        |--------------------------------------------------------------------------
        | URLs
        |--------------------------------------------------------------------------
        |
        | Register here your dashboard main urls, base, logout, login, etc...
        | The options that can be nullable is register and password_request meaning that it can be disabled.
        |
        */
        'base' => '/',
        'logout' => 'logout',
        'login' => 'login',
        'register' => 'register',
        'password_request' => 'password/reset',
        'password_email' => 'password/email',
        'password_reset' => 'password/reset',
    ],
];

您可以在 Laravel Breadcrumbs 文档中查看有关 config/breadscrumbs.php 文件的配置细节。

5. Blade 模板（布局、组件和部分视图）

此包包含一个布局和组件，用于包裹 AdminLTE 的大多数元素。建议您阅读有关布局的更多内容，请参阅 AdminLTE 文档。

1. 主要布局

这是主要布局。将主要布局视为一个容器，用于包含在 AdminLTE 标题和侧边栏中的内容。以下是一个使用 adminlte::layout.main 的示例

@extends('adminlte::layout')

@section('content')
   {-- Content--} 
@endsection

注意：内容将自动包裹在 <div class="content-wrapper"></div> 中。

2. 页面组件

页面组件是内容的容器，其中包含 <section class="content-header"></section> 用于持有标题和面包屑，以及 <section class="content"></section> 用于持有页面内容。示例

@component('adminlte::page', ['title' => 'Home', 'sub_title' => 'Main page...', 'breadcrumb' => 'BREADCRUMB_NAME'])
   The page content... 
@endcomponent

注意

选项 sub_title 和 breadcrumb 是可选的。

如果您想生成 'breadcrumb' 文件，应使用 make:breadcrumb 命令。

php artisan make:breadcrumb articles

<?php

// Home / articles
Breadcrumbs::register('dashboard.articles.index', function ($breadcrumbs) {
    $breadcrumbs->parent('dashboard.home');
    $breadcrumbs->push(trans('articles.plural'), route('dashboard.articles.index'));
});

// Home / articles / create
Breadcrumbs::register('dashboard.articles.create', function ($breadcrumbs) {
    $breadcrumbs->parent('dashboard.articles.index');
    $breadcrumbs->push(trans('articles.actions.create'), route('dashboard.articles.create'));
});

// Home / articles / {article}
Breadcrumbs::register('dashboard.articles.show', function ($breadcrumbs, $article) {
    $breadcrumbs->parent('dashboard.articles.index');
    $breadcrumbs->push($article->name, route('dashboard.articles.show', $article));
});

// Home / articles / {article} / edit
Breadcrumbs::register('dashboard.articles.edit', function ($breadcrumbs, $article) {
    $breadcrumbs->parent('dashboard.articles.show', $article);
    $breadcrumbs->push(trans('articles.actions.edit'), route('dashboard.articles.edit', $article));
});

您应在 routes/breadcrumbs.php 文件中包含 routes/breadcrumbs/articles.php，或在该目录中包含所有文件。

<?php

// routes/breadcrumbs.php

// Register all created breadcrumbs.
foreach (glob(__DIR__.'/breadcrumbs/*.php') as $breadcrumb) {
    require $breadcrumb;
}

页面组件负责显示 flash 消息。

BREADCRMB_NAME 是在 routes/breadcrumbs.php 文件中定义的面包屑名称。

带有发送数据到面包屑的示例

@component('adminlte::page', ['title' => 'Home', 'breadcrumb' => ['home', $user]])
 The page content...
@endcomponent

3. 盒子组件

盒子组件是 AdminLTE 盒子的包装器。示例代码

@component('adminlte::box')
    You're logged in!
@endcomponent

更高级的示例

@component('adminlte::box', ['title' => 'Box component (solid)', 'solid' => true, 'style' => 'info'])
    @slot('tools')
        <button class="btn btn-warning">Button</button>
    @endslot
    <p>
        Box component contents...
    </p>
    @slot('footer')
        <p>Box footer</p>
    @endslot
@endcomponent

注意：支持的样式有 default、primary、info、warning、success 和 danger。

4. 表格盒子组件

表格盒子组件可以用于在 AdminLTE 盒子组件中直接放置表格。示例用法

@component('adminlte::table-box', ['collection' => $users])
    <tr>
        <th>Name</th>
        <th>Email</th>
    </tr>
    @foreach ($users as $user)
        <tr>
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
        </tr>
    @endforeach
@endcomponent

注意

组件将自动渲染分页链接。

您不需要自己处理空集合，如果集合为空，视图将显示一条有用的消息。

5. 信息框

信息框组件是 AdminLTE 信息框的包装。示例用法

@include('adminlte::info-box', [
    'icon_color' => 'blue',
    'icon' => 'thumbs-up',
    'text' => 'likes',
    'number' => '2000',
])

或者

@include('adminlte::info-box', [
    'style' => 'red',
    'icon' => 'heart',
    'text' => 'loves',
    'number' => '500000',
    'progress' => 70,
    'progress_description' => '70% of the people loved your project!',
])

6. [可选] 覆盖默认视图

您有权修改包视图，如果您愿意，可以运行以下命令

php artisan vendor:publish --tag=adminlte-views

现在，您可以在 resources/views/vendor/adminlte 中编辑视图。

注意：**不建议**发布包视图，因为这将会屏蔽任何未来的更新和错误修复。所以除非您**了解自己在做什么**，否则不要发布视图。

7. 支持的插件

select2

//Initialize Select2 Elements
$('.select2').select2();

daterangepicker

//Date range picker
$('#reservation').daterangepicker();

//Date range picker with time picker
$('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});

//Date range as a button
$('#daterange-btn').daterangepicker(
  {
	ranges: {
	  'Today': [moment(), moment()],
	  'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
	  'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
	  'Last 30 Days': [moment().subtract(29, 'days'), moment()],
	  'This Month'  : [moment().startOf('month'), moment().endOf('month')],
	  'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
	},
	startDate: moment().subtract(29, 'days'),
	endDate  : moment()
  },
  function (start, end) {
	$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
  }
);

datepicker

//Date picker
$('#datepicker').datepicker({
  autoclose: true
});

iCheck

//iCheck for checkbox and radio inputs
$('input[type="checkbox"], input[type="radio"]').iCheck({
  checkboxClass: 'icheckbox_flat-green',
  radioClass   : 'iradio_flat-green'
});

colorpicker

//Colorpicker
$('.my-colorpicker1').colorpicker();

//color picker with addon
$('.my-colorpicker2').colorpicker();

timepicker

//Timepicker
$('.timepicker').timepicker({
  showInputs: false
});

ahmed-aliraqi / laravel-adminlte

维护者

详细信息