Update usage-widgets.md
This commit is contained in:
parent
c7748707ea
commit
28be464785
@ -25,6 +25,11 @@
|
|||||||
- [[yii\bootstrap5\Toast|Toast]]
|
- [[yii\bootstrap5\Toast|Toast]]
|
||||||
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
|
- [[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>
|
## Настройка CSS классов виджетов <span id="customizing-css-classes"></span>
|
||||||
|
|
||||||
@ -35,7 +40,7 @@
|
|||||||
```php
|
```php
|
||||||
echo Button::widget([
|
echo Button::widget([
|
||||||
'label' => 'Action',
|
'label' => 'Action',
|
||||||
'options' => ['class' => 'btn-primary'], // создаст класс "btn btn-primary"
|
'options' => ['class' => 'btn-primary'], // устанавливает класс "btn btn-primary"
|
||||||
]);
|
]);
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -44,7 +49,7 @@ echo Button::widget([
|
|||||||
```php
|
```php
|
||||||
echo ButtonGroup::widget([
|
echo ButtonGroup::widget([
|
||||||
'options' => [
|
'options' => [
|
||||||
'class' => ['widget' => 'btn-group-vertical'] // replaces 'btn-group' with 'btn-group-vertical'
|
'class' => ['widget' => 'btn-group-vertical'] // заменяет класс 'btn-group' на 'btn-group-vertical'
|
||||||
],
|
],
|
||||||
'buttons' => [
|
'buttons' => [
|
||||||
['label' => 'A'],
|
['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