Material Design Bootstrap 5 for Yii2
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist antonyz89/yii2-mdb "*"
or add
"antonyz89/yii2-mdb": "*"
to the require section of your composer.json
file.
- add
MDBootstrapPluginAsset::class
andMDBootstrapAsset::class
to yourAppAsset::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
];
}
add in common\config\main.php
return [
...
'components' => [
...
'i18n' => [
'translations' => [
'mdb' => [
'class' => PhpMessageSource::class,
'basePath' => '@antonyz89/mdb/messages',
],
],
],
]
];
- Close modal after submit
- Callback after submit
modal=1
is added to URL when submit is triggered on modal to ignore ajax validation requests and save your model successfully.data-callback
attribute is required even you don't wan't use a callback ( in this case usecallback=null
,data-callback=false
or something else ). This is because when an<a>
tag is clicked withdata-callback
attribute will add andata-ajax=1
on your form to do submit via ajax and close modal when you return{ 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,
]);
}
- UI components built with Material Design Bootstrap 5.
- Kartik enhanced Yii2's components
- Star the repo
- Create issue report or feature request