Awesome Bootstrap Checkbox for Yii2 ¶
Implementation of Awesome Bootstrap Checkbox within Yii2.
This extension overrides the ActiveField functions of
CheckboxColumn is included to implement the same awesome checkboxes in a GridView widget.
Install the extension ¶
Add the following to the require section of your
You will also need some styles for the which can either be used by copying them from the included css file or by adding justinvoelker\awesomebootstrapcheckbox\Asset as a dependency in your assets\AppAsset file. See Github for a more detailed explanation.
To use awesome bootstrap checkboxes in your ActiveForm, simply specify the
fieldClass property of the ActiveForm as follows:
$form = ActiveForm::begin([ 'fieldClass' => 'justinvoelker\awesomebootstrapcheckbox\ActiveField', ]);
Once the fieldClass is specified simply use checkbox, radio, checkboxList, or radioList as needed. The following are some examples of usage.
// Disabled checkbox with a customized label $form->field($model, 'attribute')->checkbox(['label' => 'You cannot check this checkbox', 'disabled'=>true]) // Radio with the bootstrap primary color $form->field($model, 'attribute')->radio(['divOptions' => ['class' => 'checkbox-primary']]) // List of disabled checkboxes $form->field($model, 'attribute')->checkboxList([1 => 'First', 2 => 'Second', 3 => 'Third'], ['itemOptions' => ['disabled' => true]]) // Inline list of enabled radio buttons with the bootstrap danger color $form->field($model, 'attribute')->inline()->radioList([1 => 'First', 2 => 'Second', 3 => 'Third'], ['itemOptions' => ['disabled' => false, 'divOptions' => ['class' => 'radio-danger']]])
Keep in mind that at times there are essentially two labels for a given input: one for the entire field, one for that specific checkbox or radio button. Specifying a label() will set the label for the entire field, specifying the
label itemOption will change the label for a single checkbox() or radio() button.
To create a php array of key=>value pairs (where key is the tag and value is the frequency of that tag), use TaggingQuery:
'columns' => [ // ... [ 'class' => 'justinvoelker\awesomebootstrapcheckbox\CheckboxColumn', // you may configure additional properties here ], ]
An example of an additional property could be to limit the width of the checkbox column:
'contentOptions' => ['style' => 'width: 25px;'],
Further information ¶
The GitHub README will contain the full documentation for this extension and will be updated as necessary. This extension page merely serves as a quick reference and pointer to the GitHub information.
Please do not ask for help in the comments below. If you require assistance please seek answers in the forum or GitHub for this extension.