README

为Yii2准备的Material Design Bootstrap 5

安装

安装此扩展的首选方法是使用composer。

运行以下命令之一：

php composer.phar require --prefer-dist antonyz89/yii2-mdb "*"

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

"antonyz89/yii2-mdb": "*"

使用方法

1. 将MDBootstrapPluginAsset::class和MDBootstrapAsset::class添加到您的AppAsset::class

use antonyz89\mdb\MDBootstrapAsset;
use yii\web\YiiAsset;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';

    public $css = [];
    public $js = [];
    public $depends = [
        // ...
        MDBootstrapPluginAsset::class, // 1st
        MDBootstrapAsset::class,       // 2nd
    ];
}

国际化

在common\config\main.php中添加

return [
    ...
    'components' => [
       ...
       'i18n' => [
            'translations' => [
                'mdb' => [
                    'class' => PhpMessageSource::class,
                    'basePath' => '@antonyz89/mdb/messages',
                ],
            ],
        ], 
    ]
];

模态框

• 提交后关闭模态框
• 提交后的回调

⚠️ 重要

• modal=1会在触发模态框提交时添加到URL，以忽略ajax验证请求并成功保存模型。
• data-callback属性是必需的，即使您不想使用回调（在这种情况下使用callback=null、data-callback=false或其他内容）。这是因为当一个带有data-callback属性的<a>标签被点击时，会在表单上添加data-ajax=1以通过ajax进行提交，并在您返回{ success: true }时关闭模态框。

<?= Html::a(
    Html::icon('plus'),
    ['example/create'],
    [
        'id' => 'add_example',
        'class' => 'btn btn-success show-modal', // .show-modal is required
        'data' => [
            'target' => '#modal',
            'header' => 'Create Example',
            'callback' => 'modalCallback' // (required) your callback function who will be called after submit receiving response from server
        ]
    ]
) ?>

<?php 
$js = <<<JS
    function modalCallback(data) {
        if (data.success) {
            // do something
        }
    }
JS;
?>

public function actionCreate()
{
    $model = new Example();

    // check if request is made via modal
    $isModal = $this->request->get('modal');

    if ($model->load(Yii::$app->request->post())) {
        // (opcional) ajax validation (disabled if modal ins't null)
        if (Yii::$app->request->isAjax && !$isModal) {
            Yii::$app->response->format = Response::FORMAT_JSON;
            return ActiveForm::validate($model);
        }

        if ($model->save()) {

            // if request is made via modal then return json object
            if ($isModal) {
                $this->response->format = Response::FORMAT_JSON;

                return [
                    // returning [[success => true]] closes modal
                    'success' => true,

                    // your data here
                    'model' => $model,
                    'message' => Yii::t('app', 'Created successfully'),
                ];
            }

            Yii::$app->session->setFlash('success', Yii::t('app', 'Created successfully'));
            return $this->redirect(['index']);
        }
    }

    return $this->render('create', [
        'model' => $model,
    ]);
}

致谢

• 使用Material Design Bootstrap 5构建的用户界面组件。
• Kartik增强了Yii2的组件

支持项目

• 收藏仓库
• 创建问题报告或功能请求