yii ActiveForm样式修改

PHP piniu 1010浏览 0评论

全局修改字段的样式

<?php $form = ActiveForm::begin([
        'options'=>['enctype'=>'multipart/form-data','class' => 'form-horizontal'],
        'fieldConfig' => [  //统一修改字段的模板
            'template' => "{label}\n<div class=\"col-lg-5\">{input}</div>\n<div class=\"col-lg-3\">{error}</div>", 
        //修改显示内容默认为{label}\n{input}\n{hint}\n{error}  \n是html代码显示时的换行
 
            'labelOptions' => ['class' => 'col-lg-2 control-label'],  //修改label的样式
        ],
    ]); ?>

修改指定字段的样式

//修改某字段的样式
<?= $form->field($model, 'img_path',[  
            'template' => "{label}\n<div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-2\"><label for=\"uploadImg\" class=\"btn btn-default forfocus1\" onclick=\"changeImg(1,'forfocus');\">选择图片<img src=\"\"></label></div>\n{error}",  
            'labelOptions' => ['class' => 'col-lg-2 control-label'],
        ])->textInput(['maxlength' => 255,'placeholder'=>'专题图片','readonly'=>true])->label('专题名称')->hint('错误提示信息') ?>
 

以下是完整例子:

<?php $form = ActiveForm::begin([
        'options'=>['enctype'=>'multipart/form-data','class' => 'form-horizontal'],
        'fieldConfig' => [  
            'template' => "{label}\n<div class=\"col-lg-5\">{input}</div>\n<div class=\"col-lg-5\">{error}</div>",  
            'labelOptions' => ['class' => 'col-lg-2 control-label'],
        ],
    ]); ?>
    
    <?= $form->field($model, 'title')->textInput(['maxlength' => 255,'placeholder'=>'请输入专题名称'])->label('专题名称') ?>
    <?= $form->field($model, 'img_path',[  
            'template' => "{label}\n<div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-2\"><label for=\"uploadImg\" class=\"btn btn-default forfocus1\" onclick=\"changeImg(1,'forfocus');\">选择图片<img src=\"\"></label></div>\n{error}",  
            'labelOptions' => ['class' => 'col-lg-2 control-label'],
        ])->textInput(['id'=>'img_path','maxlength' => 255,'placeholder'=>'专题图片','readonly'=>true])->label('专题名称') ?>
    <?= $form->field($model, 'showImg',[  
            'template' => "{label}\n<div id=\"showImg\" class='col-lg-10'></div>",  
            'labelOptions' => ['class' => 'col-lg-2 control-label'],
        ])->label('图片预览') ?>
    <?= $form->field($model, 'link_to')->textInput(['maxlength' => 255,'placeholder'=>'请输入专题链接'])->label('专题链接') ?>
    </div>
        
    <div class="form-group" style="margin-left: 50px;">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>
 
    <?php ActiveForm::end(); ?>

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • * 昵称:
  • * 邮箱: