README

Backend UI for Yii2 Framework, based on AdminLTE

This package contains an Asset Bundle for Yii 2.0 Framework which registers the CSS files for the AdminLTE user-interface.

Installation

The preferred way to install this extension is through composer.

To install AdminLTE v3 run:

composer require davidxu/yii2-adminlte3-asset "^1.0"

FAQ

Upgrading

When upgrading please see the AdminLTE upgrade guide for adjustments you need to make in your views.

Compatibility matrix

For other issues, please search GitHub first.

Quick Start

Once the extension is installed, you can have a preview by reconfiguring the path mappings of the view component:

For Yii 2 Advanced Application Template or Basic Application Template

'components' => [
    'view' => [
         'theme' => [
             'pathMap' => [
                '@app/views' => '@vendor/davidxu/yii2-adminlte3-asset/example-views/yiisoft/yii2-app'
             ],
         ],
    ],
],

This asset bundle provides sample files for layout and view (see folder examples/), they are not meant to be customized directly in the vendor/ folder.

Therefore it is recommended to copy the views into your application and adjust them to your needs.

Customization

• Copy files from vendor/davidxu/yii2-adminlte3-asset/example-views/yiisoft/yii2-app (or other theme) to @app/views.
• Remove the custom view configuration from your application by deleting the path mappings, if you have made them before.
• Edit your views adhering to html markup vendor/almasaeed2010/adminlte/pages

AdminLTE Plugins

Assets for AdminLTE plugins are not included in our AdminLteAsset but you can find these files in your vendor directory under vendor/almasaeed2010/adminlte/plugins. So if you want to use any of them we recommend to create a custom bundle where you list the plugin files you need:

use yii\web\AssetBundle;
class AdminLtePluginAsset extends AssetBundle
{
    public $sourcePath = '@vendor/almasaeed2010/adminlte/plugins';
    public $css = [
        'chart.js/Chart.min.css',
        // more plugin CSS here
    ];
    public $js = [
        'chart.js/Chart.bundle.min.js'
        // more plugin Js here
    ];
    public $depends = [
        'davidxu\adminlte3\web\AdminLteAsset',
    ];
}

As this asset depends on our AdminLteAsset it's the only asset you have to register, for example in your main.php layout file.

Custom content header

If you want to use native DOM of headers AdminLTE

<h1>
    About <small>static page</small>
</h1>

then you can follow the code:

/* @var yii\web\View $this */

$this->params['breadcrumbs'][] = 'About';

$this->beginBlock('content-header'); ?>
About <small>static page</small>
<?php $this->endBlock(); ?>

<div class="site-about">
    <p> This is the About page. You may modify the following file to customize its content: </p>
    <code><?= __FILE__ ?></code>
</div>

Dark mode

If you want to switch dark/light mode by a switch, you can add the following code.

<div class="theme-switch-wrapper nav-link">
    <label class="theme-switch" for="darkSwitch">
        <input type="checkbox" id="darkSwitch">
        <span class="slider round"></span>
    </label>
</div>

Left sidebar menu - Widget Menu

If you need to separate sections of the menu then just add the header option to item in items

    'items' => [
        ['label' => 'Gii', 'iconType' => 'far' 'icon' => 'file-code', 'url' => ['/gii']],
        ['label' => 'Debug', 'icon' => 'dashboard-alt', 'url' => ['/debug']],
        ['label' => 'MAIN NAVIGATION', 'header' => true], // here
        // ... a group items
        ['label' => '', 'header' => true],
        // ... a group items
        ['label' => '', 'header' => true],
        // ... a group items

To add a badge for a item:

'items' => [
    [
        'label' => 'Mailbox',
        'iconType' => 'far',
        'icon' => 'envelope',
        'url' => ['/mailbox'],
        'badge' => '<span class="badge badge-info right">123</span>'
    ],
]

Template for Gii CRUD generator

Tell Gii about our template. The setting is made in the config file:

if (YII_ENV_DEV) {
    $config['modules']['gii'] = [
        'class' => 'yii\gii\Module',
        'generators' => [ // HERE
            'crud' => [
                'class' => 'yii\gii\generators\crud\Generator',
                'templates' => [
                    'adminlte' => '@vendor/davdixu/yii2-adminlte3-asset/gii/templates/crud/simple',
                ]
            ]
        ],
    ];
}

Further Information

For AdminLTE documentation, please read https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html

Namespacing rules follow the Yii 2.0 framework structure, eg. davidxu\adminlte3\web for the Asset Bundle.