|
|
|
|
Yii widgets
|
|
|
|
|
===========
|
|
|
|
|
|
|
|
|
|
Most complex bootstrap components are wrapped into Yii widgets to allow more robust syntax and integrate with
|
|
|
|
|
framework features. All widgets belong to `\yii\bootstrap` namespace:
|
|
|
|
|
|
|
|
|
|
- [[yii\bootstrap\ActiveForm|ActiveForm]]
|
|
|
|
|
- [[yii\bootstrap\Alert|Alert]]
|
|
|
|
|
- [[yii\bootstrap\Button|Button]]
|
|
|
|
|
- [[yii\bootstrap\ButtonDropdown|ButtonDropdown]]
|
|
|
|
|
- [[yii\bootstrap\ButtonGroup|ButtonGroup]]
|
|
|
|
|
- [[yii\bootstrap\Carousel|Carousel]]
|
|
|
|
|
- [[yii\bootstrap\Collapse|Collapse]]
|
|
|
|
|
- [[yii\bootstrap\Dropdown|Dropdown]]
|
|
|
|
|
- [[yii\bootstrap\Modal|Modal]]
|
|
|
|
|
- [[yii\bootstrap\Nav|Nav]]
|
|
|
|
|
- [[yii\bootstrap\NavBar|NavBar]]
|
|
|
|
|
- [[yii\bootstrap\Progress|Progress]]
|
|
|
|
|
- [[yii\bootstrap\Tabs|Tabs]]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Customize widget CSS classes <span id="widgets-customize-css-classes"></span>
|
|
|
|
|
|
|
|
|
|
Widgets allow quick composition of the HTML for particular Bootstrap components, which requires usage of the
|
|
|
|
|
Bootstrap CSS classes. Those classes are added automatically by the widgets. However usually widget provides
|
|
|
|
|
fields or properties, which allow customization of the CSS styles for particular HTML tags.
|
|
|
|
|
|
|
|
|
|
For example: you may use [[yii\bootstrap\Button::options]] to customize appearance of the rendered button.
|
|
|
|
|
Class 'btn' will be added automatically, so you don't need to worry about it. All you need is specify particular
|
|
|
|
|
button class:
|
|
|
|
|
|
|
|
|
|
```php
|
|
|
|
|
echo Button::widget([
|
|
|
|
|
'label' => 'Action',
|
|
|
|
|
'options' => ['class' => 'btn-primary'], // produces class "btn btn-primary"
|
|
|
|
|
]);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
However, sometimes you may need to replace standard class, added by the widget, with alternative one.
|
|
|
|
|
For example: widget [[yii\bootstrap\ButtonGroup]] uses 'btn-group' class for the container div, but you may
|
|
|
|
|
need to use 'btn-group-vertical', which allows vertical-style layout for the buttons. Using plain 'class' option
|
|
|
|
|
simply adds 'btn-group-vertical' to 'btn-group', which produces incorrect result.
|
|
|
|
|
In order to actually replace class added by widget, you need to specify 'class' option as array, containing
|
|
|
|
|
needed class name under the 'widget' key:
|
|
|
|
|
|
|
|
|
|
```php
|
|
|
|
|
echo ButtonGroup::widget([
|
|
|
|
|
'options' => [
|
|
|
|
|
'class' => ['widget' => 'btn-group-vertical'] // replace 'btn-group' with 'btn-group-vertical'
|
|
|
|
|
],
|
|
|
|
|
'buttons' => [
|
|
|
|
|
['label' => 'A'],
|
|
|
|
|
['label' => 'B'],
|
|
|
|
|
]
|
|
|
|
|
]);
|
|
|
|
|
```
|
