Update usage-widgets.md
This commit is contained in:
parent
c7748707ea
commit
28be464785
@ -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();
|
||||
```
|
||||
|
Loading…
Reference in New Issue
Block a user