Update usage-widgets.md

This commit is contained in:
Anton 2021-11-30 10:32:29 +03:00 committed by GitHub
parent c7748707ea
commit 28be464785
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -25,6 +25,11 @@
- [[yii\bootstrap5\Toast|Toast]]
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
## ActiveField: дополнительные поля <span id="additional-fields"></span>
- [Диапазон](https://getbootstrap.com/docs/5.1/forms/range/): `$form->rangeInput(['min' => 0, 'max' => 100, 'step' => 1])`
- [Выбор цвета](https://getbootstrap.com/docs/5.1/forms/form-control/#color): `$form->colorInput()`
- [Переключатель](https://getbootstrap.com/docs/5.1/forms/checks-radios/#switches): `$form->checkbox(['switch' => true])`
## Настройка CSS классов виджетов <span id="customizing-css-classes"></span>
@ -35,7 +40,7 @@
```php
echo Button::widget([
'label' => 'Action',
'options' => ['class' => 'btn-primary'], // создаст класс "btn btn-primary"
'options' => ['class' => 'btn-primary'], // устанавливает класс "btn btn-primary"
]);
```
@ -44,7 +49,7 @@ echo Button::widget([
```php
echo ButtonGroup::widget([
'options' => [
'class' => ['widget' => 'btn-group-vertical'] // replaces 'btn-group' with 'btn-group-vertical'
'class' => ['widget' => 'btn-group-vertical'] // заменяет класс 'btn-group' на 'btn-group-vertical'
],
'buttons' => [
['label' => 'A'],
@ -52,3 +57,36 @@ echo ButtonGroup::widget([
]
]);
```
## Виджет навигационной панели <span id="navbar-widget"></span>
Виджет навигационной панели имеет свои особенности. Вы должны определить, точку останова (разрешение при котором панель отображается в свернутом виде)
и основной стиль отображения (цветовая схема) для панели.
Вы можете изменить цветовую схему и точку останова с помощью CSS классов. По умолчанию, используется цветовая схема
`navbar-light bg-light` и точка останова `navbar-expand-lg`. Для получения доп. информации, смотрите [документацию Bootstrap](https://getbootstrap.com/docs/5.1/components/navbar/):
```php
Navbar::begin([
'options' => [
'class' => ['navbar-dark', 'bg-dark', 'navbar-expand-md']
]
]);
[...]
Navbar::end();
```
Если Вы хотите повернуть бренд (значок) и переключить положение кнопок в мобильной навигации, то можете сделать это следующим образом:
```php
Navbar::begin([
'brandOptions' => [
'class' => ['order-1']
],
'togglerOptions' => [
'class' => ['order-0']
]
]);
[...]
Navbar::end();
```