README

为 Yii2 的 Material Design Lite

安装

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

运行以下命令之一：

php composer.phar require --prefer-dist lismansihotang/yii2-material-design-lite "*"

或者

"lismansihotang/yii2-material-design-lite": "*"

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

使用方法

扩展安装后，只需在您的代码中使用它即可

资产

在您的布局中注册此资产。对于任何自定义目的，您可以通过自己操作实现，只需查看 "如何操作"： https://material-design-lite.npmjs.net.cn/components/index.html

<?php
use lismansihotang\mdl\assets\BaseAsset;
BaseAsset::register($this); 
?>

按钮

创建您的简单按钮。

<?= \lismansihotang\mdl\src\Button::widget(['content' => ['label' => 'button']]); ?>

文本字段

创建您的简单文本字段。

无需任何模型

<?= \lismansihotang\mdl\src\TextField::widget(['name'=>'field-name', 'label'=>'For Label']); ?>

带有模型

<?php $form = ActiveForm::begin([
        'fieldClass' => '\lismansihotang\mdl\src\ActiveField'
    ]); ?>


<?= $form->field($model, 'field', ['template' => '{input}{hint}{error}'])->widget(TextField::className(), [
        'options' => ['widget' => 'textfield']
    ]) ?>

复选框

创建您的简单复选框。

无需任何模型

<?= \lismansihotang\mdl\src\Checkbox::widget(['name' => 'is_ok', 'label' => 'Yes']); ?>

带有模型

<?php $form = ActiveForm::begin([
        'fieldClass' => '\lismansihotang\mdl\src\ActiveField'
    ]); ?>


<?= $form->field($model, 'field', ['template' => '{input}{hint}{error}'])->widget(Checkbox::className(), [
        'options' => ['widget' => 'checkbox']
    ]) ?>

单选按钮

创建您的简单单选按钮。

无需任何模型

<?= \lismansihotang\mdl\src\RadioButton::widget(['name' => 'is_ok', 'label' => 'Yes', 'value'=>'1']); ?>

带有模型

<?php $form = ActiveForm::begin([
        'fieldClass' => '\lismansihotang\mdl\src\ActiveField'
    ]); ?>


<?= $form->field($model, 'field', ['template' => '{input}{hint}{error}'])->widget(RadioButton::className(), [
        'options' => ['widget' => 'radio']
    ]) ?>

图标切换

创建您的简单图标切换。

无需任何模型

<?= \lismansihotang\mdl\src\IconToggle::widget(['name' => 'icon-toggle', 'label' => 'format_bold']); ?>

带有模型

<?php $form = ActiveForm::begin([
        'fieldClass' => '\lismansihotang\mdl\src\ActiveField'
    ]); ?>


<?= $form->field($model, 'field', ['template' => '{input}{hint}{error}'])->widget(IconToggle::className(), [
        'options' => ['widget' => 'iconToggle','label' => 'format_bold']
    ]) ?>

开关

创建您的简单开关。

无需任何模型

<?= \lismansihotang\mdl\src\SwitchToggle::widget(['name' => 'switch-toggle', 'label' => null]); ?>

带有模型

<?php $form = ActiveForm::begin([
        'fieldClass' => '\lismansihotang\mdl\src\ActiveField'
    ]); ?>


<?= $form->field($model, 'field', ['template' => '{input}{hint}{error}'])->widget(SwitchToggle::className(), [
        'options' => ['widget' => 'switchToggle','label' => null]
    ]) ?>

徽章

创建您的简单徽章。

<?= \lismansihotang\mdl\src\Badge::widget(['type_icon' => true, 'label' => 'account_box', 'options' => ['data-badge' => '2']]); ?>

卡片

创建您的简单卡片。

<?= \lismansihotang\mdl\src\Card::widget([
    'title' => 'Welcome',
    'image' => Yii::getAlias('@web') . '/images/welcome_card.jpg',
    'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...',
    'button' => ['label' => 'Get Started','action' => ['site/index'],'icon' => 'event'],
    'menu' => ['icon' => 'share','action' => ['sample/action']],
    'options' => ['type' => Card::TYPE_EVENT]]); ?>