3.5 KiB
Виджеты Yii
Большинство сложных Bootstrap компонентов обернуты в виджеты Yii, чтобы обеспечить более надежный синтаксис и интеграцию с особенностями фреймворка. Все виджеты относятся к пространству имен \yii\bootstrap5:
- yii\bootstrap5\Accordion
- yii\bootstrap5\ActiveField
- yii\bootstrap5\ActiveForm
- yii\bootstrap5\Alert
- yii\bootstrap5\Breadcrumbs
- yii\bootstrap5\Button
- yii\bootstrap5\ButtonDropdown
- yii\bootstrap5\ButtonGroup
- yii\bootstrap5\ButtonToolbar
- yii\bootstrap5\Carousel
- yii\bootstrap5\Dropdown
- yii\bootstrap5\LinkPager
- yii\bootstrap5\Modal
- yii\bootstrap5\Nav
- yii\bootstrap5\NavBar
- yii\bootstrap5\Offcanvas
- yii\bootstrap5\Popover
- yii\bootstrap5\Progress
- yii\bootstrap5\Tabs
- yii\bootstrap5\Toast
- yii\bootstrap5\ToggleButtonGroup
Настройка CSS классов виджетов
Виджеты позволяют быстро создавать HTML Bootstrap компоненты, которые требуют CSS классы Bootstrap. Классы по умолчанию, для конкретного компонента, будут добавлены автоматически виджетом, и необязательные классы, которые вы можете настроить, как правило, поддерживаются через свойства виджета.
Например, вы можете использовать yii\bootstrap5\Button::options чтобы настроить внешний вид кнопки. Класс btn, который требуется для кнопки, будет добавлен автоматически. Все, что вам нужно, это указать конкретный класс кнопки:
echo Button::widget([
'label' => 'Action',
'options' => ['class' => 'btn-primary'], // создаст класс "btn btn-primary"
]);
Тем не менее, иногда вам может понадобиться заменить классы по умолчанию альтернативными. Например, виджет yii\bootstrap5\ButtonGroup использует класс btn-group для контейнера div по умолчанию, но вам, возможно, придётся использовать btn-group-vertical чтобы выровнять кнопки по вертикали. Добавление btn-group-vertical в параметр class приведет к неправильному результату. Для того, чтобы переопределить классы виджета по умолчанию, необходимо указать параметр class как массив, содержащий определение класса, настроенное в ключе widget:
echo ButtonGroup::widget([
'options' => [
'class' => ['widget' => 'btn-group-vertical'] // replaces 'btn-group' with 'btn-group-vertical'
],
'buttons' => [
['label' => 'A'],
['label' => 'B'],
]
]);