yii2-bootstrap5/docs/guide-ru/usage-widgets.md

Виджеты 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'],
    ]
]);