YII2-你所该知道的杀马特操作-灵活使用各种widget

博客 · 本文由 · 加班中途去撩妹 · 发布于 1年前 · 1195 阅读

YII2为我们提供了很多widget用来快速构建前端HTML代码,但是很多属性我们并不知道。经过一阵子瞎摸索找到了以下技巧。

YII2大部分widget都是构建了Bootstrap类标签,所以widget分为普通widgetBootstrap widgetBootstrap widget位于yii\bootstrap下,而一般常用的widgets位于yii\widgets或者通过yii\helpers\Html构建;

我们很多时候需要定义一个HTML元素的属性,style,id,或者class。例如

yii\helpers\Html::submitButton($content = 'Submit', $options = []);

作者为方便开发者如果需要改变widget的属性时定义options参数即可,比如我需要定义一个html标签的class则只需要定义

Html::submitButton('登录', ['class' => 'btn btn-primary', 'name' => 'login-button']),['属性'=>'属性值'];

很惊奇的发现一个widget只要有options参数则都是一样,列如定义 class

 ['class' => 'btn btn-primary',...],

定义html的ID

['id' => 'mView',...]

如果需要强大而优美的Bootstrap widget则只需要研究以下Bootstrap V3下的样式即可参考文档 https://v3.bootcss.com/

以上代码生成了三个Bootstrap风格的按钮,以为YII2集成了Bootstrap css所以只要按钮中有Bootstrap的类样式就会被应用上去,至于需要哪些样式则只需要研究 https://v3.bootcss.com/css/ 可以了。

另外需要强调的是YII中有很多组合控件比如ActiveForm中的$form->field,这类控件会有一个div,再套一个input或者别的元素form->field 中的options和别处不同form->field中的options参数并不是直接定义div中的属性form->field对应的是 ActiveForm::begin中的fieldConfig变量,不同的是ActiveForm::begin是定义全部的子条目,而form->field是定义当前的一个条目。所以form->field定义外套的div的各种属性是 [...,'options'=>['class' => 'input-group'],..]因为form->field不仅能定义div元素的各种标签属性options还能定义template等。我们很多时候的需求是既要定义组合表达的div还要定义子HTML元素的各种属性

passwordInput和普通的Input区别就是多了一个type="password"属性,我们通过了上面的代码给这个input添加了一个style属性并且属性值是width: 25px;

至于options能定义什么得HTML支持什么属性,就算不支持也能加上去,至于效果嘛得看浏览器得眼色了。不管什么view一定得先找到它的options能在哪里传

评论数量:0