README

组件可用于PHP或与yii2框架结合使用。

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

演示
MDC 模板
MDC Google 组件页面

要生成新的模板，请使用 MDC 模板
要生成配色方案，请使用 颜色工具

使用的 Google MDC 版本为 v.10

安装

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

运行以下命令之一：

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

或者

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

将以下内容添加到您的 composer.json 文件的 require 部分。

用法

扩展安装后，只需在您的代码中通过以下方式使用它：

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

如果您使用 YhAsset，则 JS 和 CSS 脚本已包含在内。单独使用 JS 可以通过 MdcJsAsset 连接。

UtilsAsset 将连接用于处理 表单 和 表格 以及异步 xhr 请求的脚本。

示例

添加用户名和密码文本字段

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']
],

添加灰色按钮

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

添加菜单

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()

添加 snackbar

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

在此处查看 JS 组件的使用示例

• Material-Design-Components-for-web

由 Google 提供

• Web 的 Material 组件
• 手动包
• 组件的外观示例
• 和