diff --git a/common.blocks/control-group/control-group.ru.md b/common.blocks/control-group/control-group.ru.md
index 28727e571..fc6d4648e 100644
--- a/common.blocks/control-group/control-group.ru.md
+++ b/common.blocks/control-group/control-group.ru.md
@@ -1,52 +1,94 @@
# control-group
-Блок `control-group` – это обертка, предназначенная для визуальной группировки других блоков. Группируемые блоки помещаются в поле `content` BEMJSON-декларации.
-
-Блок реализован только в технологии CSS. Для всех вложенных блоков должна быть установлена тема `islands`.
-
-В результате применения шаблонов блок `control-group` становится на странице HTML-элементом с тегом `
`.
+Используется как обертка для **визуальной** группировки других блоков. Группируемые блоки помещаются в поле `content` BEMJSON-декларации.
## Варианты использования
Блок позволяет визуально группировать следующие блоки:
* [input](../input/input.ru.md)
+
+```js
+{
+ block : 'control-group',
+ content : [
+ {
+ block : 'input',
+ mods : { theme : 'islands', size : 'm', type : 'search' },
+ placeholder : 'Имя'
+ },
+ {
+ block : 'input',
+ mods : { theme : 'islands', size : 'm', type : 'search' },
+ placeholder : 'Фамилия'
+ },
+ {
+ block : 'input',
+ mods : { theme : 'islands', size : 'm', type : 'search' },
+ placeholder : 'Электронный адрес'
+ }
+ ]
+}
+```
+
* [button](../button/button.ru.md)
-```bemjson
+```js
+{
+ block : 'control-group',
+ content : [
+ {
+ block : 'button',
+ mods : { theme : 'islands', size : 'm' },
+ text : 'Просмотреть корзину'
+ },
+ {
+ block : 'button',
+ mods : { theme : 'islands', size : 'm' },
+ text : 'История покупок'
+ },
+ {
+ block : 'button',
+ mods : { theme : 'islands', size : 'm' },
+ text : 'Проверить бонусный счет'
+ }
+ ]
+}
+```
+
+```js
{
block : 'control-group',
content : [
{
block : 'input',
mods : { theme : 'islands', size : 'm', type : 'search' },
- val : 'Your-query',
- placeholder : 'query'
+ placeholder : 'Введите запрос'
},
{
block : 'button',
mods : { theme : 'islands', size : 'm' },
- text : 'search'
+ text : 'Поиск'
}
]
}
```
-Кроме того, можно группировать блоки, использующие `input` или `button` как один из компонентов. Например, в группу можно включить блок `select`, управляющим компонентом которого служит блок `button`:
+* [select](../select/select.ru.md)
-```bemjson
+```js
{
block : 'control-group',
content : [
{
block : 'input',
mods : { theme : 'islands', size : 'm' },
- placeholder : 'price from'
+ placeholder : 'Цена от'
},
{
block : 'input',
mods : { theme : 'islands', size : 'm' },
- placeholder : 'to'
+ placeholder : 'до '
},
{
block : 'select',
@@ -61,92 +103,53 @@
}
```
-Блоки, использующие в качестве компонента блок `button`, могут быть сгруппированы:
-
-* [select](../select/select.ru.md);
-* [dropdown](../dropdown/dropdown.ru.md) (с модификатором `dropdown_switcher_button`);
-* [checkbox](../checkbox/checkbox.ru.md) (с модификатором `checkbox_type_button`);
-* [radio](../radio/radio.ru.md) (с модификатором `radio_type_button`).
-
-## Влияние группировки на блоки
-
-### Блок `input`
+* [dropdown](../dropdown/dropdown.ru.md) (с модификатором `switcher` в значении `button`)
-Для всех сгруппированных блоков `input`, кроме последнего, не отображается правая граница (CSS-свойство `right` устанавливается равным нулю для псевдоэлемента `:before`). У последнего блока группы толщина правой границы равна 1px.
-
-```bemjson
+```js
{
block : 'control-group',
content : [
{
- block : 'input',
- mods : { theme : 'islands', size : 'm', type : 'search' },
- val : 'First-query',
- placeholder : 'query'
- },
- {
- block : 'input',
- mods : { theme : 'islands', size : 'm', type : 'search' },
- val : 'Second-query',
- placeholder : 'query'
+ block : 'button',
+ mods : { view : 'action', theme : 'islands', size : 'm' },
+ text : 'Купить сейчас!'
},
{
- block : 'input',
- mods : { theme : 'islands', size : 'm', type : 'search' },
- val : 'Another-query',
- placeholder : 'query'
+ block : 'dropdown',
+ mods : { switcher : 'button', theme : 'islands', size : 'm' },
+ switcher : 'Действующие скидки',
+ popup : 'Воспользуйтесь нашим специальным предложением: «50% скидка на доставку каждого пятого груза».'
}
]
}
```
-### Блок `button`
-
-Для блоков `button` группировка влияет на скругление углов и наличие правой границы. Внешний вид зависит от положения блока `button` в группе – первый и последний элементы группы визуально отличаются от остальных:
-
-
-
- Положение в группе |
- Скругление углов |
- Правый отступ |
-
-
- Первый |
- Скруглены левые углы, верхний и нижний |
- - |
-
-
- Последний |
- Скруглены правые углы, верхний и нижний |
- + |
-
-
- В середине |
- Без скругления углов |
- - |
-
-
+* [checkbox](../checkbox/checkbox.ru.md) (с модификатором `type` в значении `button`)
-Например:
-
-```bemjson
+```js
{
block : 'control-group',
content : [
{
- block : 'button',
- mods : { theme : 'islands', size : 'm' },
- text : 'The first element'
+ block : 'checkbox',
+ mods : { theme : 'islands', size : 'm', type : 'button' },
+ name: 'tv',
+ val: '1',
+ text : 'Телевизоры'
},
{
- block : 'button',
- mods : { theme : 'islands', size : 'm' },
- text : 'In the middle'
+ block : 'checkbox',
+ mods : { theme : 'islands', size : 'm', type : 'button' },
+ name: 'photo',
+ val: '1',
+ text : 'Фотокамеры'
},
{
- block : 'button',
- mods : { theme : 'islands', size : 'm' },
- text : 'The last element'
+ block : 'checkbox',
+ mods : { theme : 'islands', size : 'm', type : 'button' },
+ name: 'book',
+ val: '1',
+ text : 'Электронные книги'
}
]
}