如何在Yii 2中设置Bootstrap4切换按钮组?

mf98qq94  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(3)|浏览(185)

当我使用yii\bootstrap4\ToggleButtonGroup小工具时,我遇到了两个主要问题:

1.标签内嵌按钮
2.错误字段不出现

我尝试访问标签“样式”属性,但没有成功。还检查了我的模型,如果我的字段有规则“必需”。

这是我的视图小工具:

<?php 
    echo $form->field($model, 'my_field', ['options' => []])->widget(\yii\bootstrap4\ToggleButtonGroup::class, [
    'type' => \yii\bootstrap4\ToggleButtonGroup::TYPE_RADIO,
        'items' => [
            '0' => 'No',
            '1' => 'Yes'
        ],
        'options' => [
            'class' =>'btn-group btn-group-toggle'
        ],
            'labelOptions' => [
            'class' => ['btn', 'btn-secondary'],
            'wrapInput' => false
        ]
    ]);
?>

我希望在ToggleButtonGroup(在新行中)上有标签,并且希望在未单击任何按钮且提交表单时看到错误字段“此字段是必需的”。

"谢谢你的帮助"

lrl1mhuk

lrl1mhuk1#

您可以通过添加'label'=〉false禁用标签,然后手动添加

<P> Yes or NO </p>

<?php 
    echo $form->field($model, 'my_field', ['options' => []])->widget(\yii\bootstrap4\ToggleButtonGroup::class, [
    'type' => \yii\bootstrap4\ToggleButtonGroup::TYPE_RADIO,
        'items' => [
            '0' => 'No',
            '1' => 'Yes'
        ],
        'options' => [
            'class' =>'btn-group btn-group-toggle'
        ],'label'=>false,
    ]);
?>
or ad

或将自定义类添加到标签

'labelOptions' => [
            'class' => ['btn', 'btn-secondary Customclass'],
            'wrapInput' => false
        ]

并将自定义CSS类添加到样式中
.自定义类{宽度:100%;/* 其他属性 */ }

vvppvyoh

vvppvyoh2#

下面的代码工作正常。

1.带型号

<? echo $form->field($model, 'model_attribute')->widget(\yii\bootstrap\ToggleButtonGroup::classname(), [
    'type' => 'radio', //or 'checkbox'
    'items' => $model_attribute_options,
    'labelOptions' => [
        'class' => ['btn', 'btn-primary Customclass'],
        'wrapInput' => true
    ],
    'value' =>  [$model->model_attribute] //pass comma separated values for multi selection for checkbox type
]) ?>

2.无模型

<?php 
echo ToggleButtonGroup::widget([
    'name' => 'sport',
    'type' => 'radio', //or 'checkbox'
    'items' => [
        0 => 'Soccer',
        1 => 'Basket',
        2 => 'Tennis',
    ],
    'value' =>  [0] //pass comma separated values for multi selection for checkbox type
 ]);
?>
ncgqoxb0

ncgqoxb03#

您可以使用宽度百分比和边距(w-50 ml-3 mr-3)来调整和强制换行。也可以使用btn-outline-secondary弹出所选按钮。

echo $form->field($model, 'my_field', ['options' => ['class' => 'form-group'])->widget(\yii\bootstrap4\ToggleButtonGroup::class, [
'type' => \yii\bootstrap4\ToggleButtonGroup::TYPE_RADIO,
    'items' => [
        'Y' => 'Yes',
        'N' => 'No',
    ],
    'options' => [
        'class' =>'btn-group btn-group-toggle w-50 ml-3 mr-3',
    ],
        'labelOptions' => [
        'class' => ['btn', 'btn-outline-secondary'],
    ],
])->label('label here')->hint('hint here');

我没有任何问题,显示错误信息以及与上述。

相关问题