README

Components can be used in php or in conjunction with the yii2 framework.

The project can be supported by money, beer, burger, clothes and your motorcycle. Thank you 😎  

Demos
MDC Template
MDC Google Components Page

To generate a new template use MDC Template
To generate a color scheme Color tool

Google MDC version used v.10

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist youra-halloween/yii2-material-design-components "^0.4.0"

or add

"youra-halloween/yii2-material-design-components": "^0.4.0"

to the require section of your composer.json file.

Usage

Once the extension is installed, simply use it in your code by :

/**
 * Main backend application asset bundle.
 */
class MainAsset extends AssetBundle
{
    public $depends = [
        'yh\mdc\assets\YhAsset',
    ];
}

If you use YhAsset, then JS and CSS scripts are included. Separately JS can be connected using MdcJsAsset.

UtilsAsset will connect scripts for working with forms and tables and asynchronous xhr requests.

Examples

Add textfield username and password

use yh\mdc\ActiveForm;
use yh\mdc\components\TextField;

$form->field($model, 'username')->textInput([
                'tabIndex' => 1,
                'autocomplete' => 'username',
                'required' => true,
                'property' => [
                    'autoFocus' => true,
                    'label' => Yii::t('backend/login', 'Введите логин'),
                    'labelTemplate' => TextField::ALIGN_TOP,
                    'labelSize' => Vars::LARGE,
                    'textSize' => Vars::LARGE,
                    'helper' => Yii::t('backend/login', 'email | логин'),
                    'height' => Vars::LARGE
                ],
            ])

$form->field($model, 'password')->passwordInput([
                'tabIndex' => 2,
                'autocomplete' => 'current-password',
                'required' => true,
                'property' => [
                    'label' => Yii::t('backend/login', 'Введите пароль'),
                    'labelTemplate' => TextField::ALIGN_TOP,
                    'labelSize' => Vars::LARGE,
                    'textSize' => Vars::LARGE,
                    'icons' => [
                        ['icon' => 'visibility', 'role' => 'button', 'toggle' => 'visibility_off']
                    ],
                    'helper' => '',
                    'height' => Vars::LARGE
            ]])

/**
 * role - can be icon or button
 * toggle - when you click on the button, change the icon
 */
'icons' => [
    ['icon' => 'visibility', 'role' => 'button', 'toggle' => 'visibility_off']
],

Add gray button

Button::one(Yii::t('backend/login', 'Войти'), ['spinner' => Button::SP_AUTO], ['tabIndex' => 4])
    ->setOwner($form)
    ->gray()
    ->submit()

Add menu

Menu::one([
    'id' => 'locale-menu',
    'items' => I18nLocale::getList()
])->render()

//Where I18nLocale::getList() returns an associative array

// OR

Menu::one([
    'id' => 'app-user-menu',
    'items' => [
        [
            'text' => Yii::t('backend/main/user-menu', 'Настройки профиля'),
            'separator' => true
        ],
        [
            'text' => Yii::t('backend/main-user-menu', 'Выход'),
            'href' => Url::to('main/logout'),
            'options' => [
                'data' => ['method' => 'post']
            ]
        ],
    ]
])
->render()

Add snackbar

Snackbar::one('')
    ->setProperty(['closeButton'=> Yii::t('backend', 'Закрыть')])
    ->setId('app-snackbar')
    ->render()

See the use of JS components here

• Material-Design-Components-for-web

By Google

• Material Components for the web
• Manual packages
• Examples of what components look like
• And