Yii2 Material Assets
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 paskuale75/yii2-material-assets "dev-master"
or add
"paskuale75/yii2-material-assets": "dev-master"
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/paskuale75/yii2-material-assets/template/material-dashboard/view'
],
],
],
],
Don't forget to remove
'yii\bootstrap\BootstrapAsset'
and'yii\bootstrap\BootstrapPluginAsset'
fromcommon\asset\AppAsset
(advence) orapp\asset\AppAsset
(basic)
Customization
- Copy files from
vendor/spl/yii2-material-assets/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' => [
'paskuale75\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 paskuale75\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