irrahub/yii2-material-assets

Material Ui template for yii2

dev-master 2018-09-03 10:17 UTC

Requires

• yiisoft/yii2: ~2.0.0

MIT

• sanpyaelin

• admin
• assets
• ui
• theme
• template
• extension
• dashboard
• yii2
• material

README

Material UI for Yii2 Framework, based on Creative Tim Material Dashboard

Installation

The preferred way to install this extension is through composer.

Either run

php composer require irrahub/yii2-material-assets

or add

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

to the require section of your composer.json file.

Quick Start

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

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

Don't forget to remove 'yii\bootstrap\BootstrapAsset' and 'yii\bootstrap\BootstrapPluginAsset' from common\asset\AppAsset(advence) or app\asset\AppAsset(basic)

Customization

• Copy files from vendor/spl/yii2-material-template/template/material-dashboard/view
• Remove the custom view configuration from your application by deleting the path mappings, if you have made them before.

Web-font usage

Copy-paste the stylesheet into your before all other stylesheets to load the Fonts and Icons.

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

Config template

Default config.

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

You can change it in config file.

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

or

using bundled assets

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

Sidebar menu - Widget Menu

        $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'],],
                        ],
                    ],
                ],
            ]
        );

create menu.php in common\models(advence) or app\models(basic) if you configuring the path mappings of the view component

example:

<?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;
    }

}

By default to icons will be added prefix of Material Icon

Notification : Noti widget

This is the Noti widget and Yii 2 enhanced wrapper for the Bootstrap Notify plugin

Usage

Add widget to your layout/main :

use spl\widgets\Noti;

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

Noti widget renders a message from session flash. All flash messages are displayed in the sequence they were assigned using setFlash. You can set message as following:

Set the message in your action, for example:

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');

Also, you can set multiple messages as follows:

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

Render message without the session flash

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

TO DO

• [template] add other material template ( backend & frontend )
• [widgets] add widget for material template ( each template )
• theme provider