elnooronline/laravel-adminlte

请简要描述您的包的功能

v3.0.0 2020-11-10 21:21 UTC

README

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

  1. 简介
  2. 安装
  3. 覆盖 Laravel 认证视图
  4. 配置
  5. Blade 模板(布局、组件和部分视图)
    1. 主布局
    2. 页面组件
    3. 框组件
    4. 表格框组件
    5. 信息框组件
  6. [可选] 覆盖默认视图

1. 简介

此包在内部依赖于其他包,这些包包括

2. 安装

您可以通过运行以下命令使用 composer 命令行工具安装 laravel-adminlte

composer require elnooronline/laravel-adminlte

然后运行以下命令以发布所需的资源和文件

php artisan vendor:publish --tag=adminlte-assets --tag=adminlte-breadcrumbs --tag=adminlte-config

3. 覆盖 Laravel 认证视图

在遵循 认证快速入门 中的步骤后,您可以通过运行以下命令替换创建的认证视图

php artisan vendor:publish --tag=adminlte-auth --force

4. 配置

在步骤 1 中发布配置文件后,将发布两个配置文件 config/adminlte.phpconfig/breadcrumbs.php

<?php

// config/adminlte.php

return [

    /*
     * The logo of the dashboard.
     */
    'logo' => '<b>Laravel</b> AdminLTE',


    /*
     * The small logo of the dashboard.
     */
    'small_logo' => '<b>Lara</b> LTE',

    /*
     * The name of the dashboard.
     */
    'name' => 'Web App Name',

    '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::layout.header.messages',
                'adminlte::layout.header.notifications',
                'adminlte::layout.header.tasks',
                'adminlte::layout.header.user',
                'adminlte::layout.header.logout',
            ],
        ],

        /*
         * The sidebar items that will be rendered.
         */
        'sidebar' => [
            'items' => [
                'adminlte::layout.sidebar.user-panel',
                'adminlte::layout.sidebar.search-form',
                'adminlte::layout.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/breadcrumbs.php 文件配置的详细信息。

5. Blade 模板(布局、组件和部分视图)

此包包含一个布局和组件,这些组件封装了大部分 AdminLTE 元素。建议您阅读有关布局的更多内容,请参阅 AdminLTE 文档

1. 主布局

这被视为一个容器,用于在 AdminLTE 头部和侧边栏中包含您的内联内容。以下是一个使用 adminlte::layout.main 的示例

@extends('adminlte::layout.main')

@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_titlebreadcrumb 是可选的。

页面组件负责显示 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

注意:支持的风格是 defaultprimaryinfowarningsuccessdanger

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中编辑视图。

注意:**不推荐**发布包视图,因为这将会禁用未来的更新和错误修复。所以除非您**了解自己在做什么**,否则不要发布视图。