From 28be464785258699c26e17899d4e90f7e8ac97b2 Mon Sep 17 00:00:00 2001 From: Anton Date: Tue, 30 Nov 2021 10:32:29 +0300 Subject: [PATCH] Update usage-widgets.md --- docs/guide-ru/usage-widgets.md | 42 ++++++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/docs/guide-ru/usage-widgets.md b/docs/guide-ru/usage-widgets.md index eb21a56..cfe1696 100644 --- a/docs/guide-ru/usage-widgets.md +++ b/docs/guide-ru/usage-widgets.md @@ -25,6 +25,11 @@ - [[yii\bootstrap5\Toast|Toast]] - [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]] +## ActiveField: дополнительные поля + +- [Диапазон](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 классов виджетов @@ -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([ ] ]); ``` + +## Виджет навигационной панели + +Виджет навигационной панели имеет свои особенности. Вы должны определить, точку останова (разрешение при котором панель отображается в свернутом виде) +и основной стиль отображения (цветовая схема) для панели. + +Вы можете изменить цветовую схему и точку останова с помощью 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(); +```