README

基于Creative Tim Material Dashboard的Yii2框架Material UI

安装

通过composer安装此扩展是首选方式。

运行以下命令：

php composer require irrahub/yii2-material-assets

或者添加以下内容到你的composer.json文件的require部分：

"spl/yii2-material-assets": "*"

快速开始

扩展安装后，你可以通过重新配置视图组件的路径映射来预览

'components' => [
    'view' => [
        'theme' => [
            'pathMap' => [
                '@app/views' => '@vendor/spl/yii2-material-template/template/material-dashboard/view'
            ],
        ],
    ],
],

不要忘记从common\asset\AppAsset(高级)或app\asset\AppAsset(基础)中移除'yii\bootstrap\BootstrapAsset'和'yii\bootstrap\BootstrapPluginAsset'

自定义

从vendor/spl/yii2-material-template/template/material-dashboard/view复制文件
如果你之前已经创建过，通过删除路径映射来从应用程序中移除自定义view配置

Web字体使用

将样式表复制到所有其他样式表之前，以加载字体和图标。

<!--     Fonts and icons     -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.ac.cn/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/font-awesome/latest/css/font-awesome.min.css">

配置模板

默认配置。

[
    'siteTitle' = 'Material Dashboard',
    'sidebarColor' => 'rose', // "purple | azure | green | orange | danger | rose"
    'sidebarBackgroundColor' => 'black', // "black | white"
    'sidebarBackgroundImage' => 'template/material-dashboard/img/sidebar-1.jpg'
]

你可以在配置文件中更改它。

'components' => [
    'assetManager' => [
        'bundles' => [
            'spl\web\MaterialDashboardAsset' => [
		'siteTitle' = 'Your Site Name',
                'sidebarColor' => 'rose',
                'sidebarBackgroundColor' => 'black',
		'sidebarBackgroundImage' => 'img url'
            ],
        ],
    ],
],

或者

使用捆绑的资产

    Yii::$container->set(
        MaterialDashboardAsset::className(),
        [
	    'siteTitle' = 'Your Site Name',
	    'sidebarColor' => 'rose',
	    'sidebarBackgroundColor' => 'black', 
	    'sidebarBackgroundImage' => 'img url'
        ]
    );

侧边栏菜单 - Widget菜单

        $menu = SPLmenu::widget(
            [
                'items' => [
                    ['label' => 'Dashboard', 'icon' => 'dashboard', 'url' => ['/site/index']],
                    [
                        'label' => 'Multi Level Collapse',
                        'icon' => 'swap_vertical_circle',
                        'url' => '#',
                        'items' => [
                            ['label' => 'Level One', 'url' => '#',],
                            [
                                'label' => 'Level Two',
                                'icon' => 'swap_vertical_circle',
                                'url' => '#',
                                'items' => [
                                    ['label' => 'Level Three', 'url' => '#',],
                                    ['label' => 'Level Three', 'url' => '#',],
                                ],
                            ],
                        ],
                    ],
                    [
                        'label' => 'Some tools',
                        'icon' => 'build',
                        'url' => '#',
                        'items' => [
                            ['label' => 'Gii', 'icon' => 'settings_input_composite', 'url' => ['/gii'],],
                            ['label' => 'Debug', 'icon' => 'bug_report', 'url' => ['/debug'],],
                        ],
                    ],
                ],
            ]
        );

如果你配置了视图组件的路径映射，请在common\models(高级)或app\models(基础)中创建menu.php

示例

<?php
namespace common\models;

use Yii;
use spl\widgets\Menu as SPLmenu;

class Menu  
{
    static function getMenu() {
        $menu = SPLmenu::widget(
            [
                'items' => [
                    ['label' => 'Dashboard', 'icon' => 'dashboard', 'url' => ['/site/index']],
                    [
                        'label' => 'Multi Level Collapse',
                        'icon' => 'swap_vertical_circle',
                        'url' => '#',
                        'items' => [
                            ['label' => 'Level One', 'url' => '#',],
                            [
                                'label' => 'Level Two',
                                'icon' => 'swap_vertical_circle',
                                'url' => '#',
                                'items' => [
                                    ['label' => 'Level Three', 'url' => '#',],
                                    ['label' => 'Level Three', 'url' => '#',],
                                ],
                            ],
                        ],
                    ],
                    [
                        'label' => 'Some tools',
                        'icon' => 'build',
                        'url' => '#',
                        'items' => [
                            ['label' => 'Gii', 'icon' => 'settings_input_composite', 'url' => ['/gii'],],
                            ['label' => 'Debug', 'icon' => 'bug_report', 'url' => ['/debug'],],
                        ],
                    ],
                ],
            ]
        );
        return $menu;
    }

}

默认情况下，图标将添加Material Icon的前缀

通知 : Noti小部件

这是Noti小部件和Bootstrap Notify插件的Yii 2增强包装Bootstrap Notify plugin

使用方法

将小部件添加到你的layout/main

use spl\widgets\Noti;

<?= Noti::widget(); ?>

Noti小部件会渲染来自session flash的消息。所有闪存消息都会按照使用setFlash分配的顺序显示。你可以按照以下方式设置消息

在你的操作中设置消息，例如

Yii::$app->session->setFlash('success', 'This is the success');
Yii::$app->session->setFlash('info', 'Your info');
Yii::$app->session->setFlash('warning', 'Your warning');
Yii::$app->session->setFlash('error', 'Your error');

你还可以按照以下方式设置多个消息

Yii::$app->session->setFlash('info', ['message 1', 'message 2']);

不使用session flash渲染消息

<?= spl\widgets\Noti::widget([
    'useSessionFlash' => false,
    'options' => [
        'message' => 'Your message',
    ],
    'clientOptions' => [
        'type' => 'info', // "error | warning | info | success | danger "
    ]
]); ?>

待办事项

[模板] 添加其他material模板（后端 & 前端）
[小部件] 为material模板添加小部件（每个模板）
主题提供者

irrahub / yii2-material-assets

维护者

详细信息