control-group
Используется как обертка для визуальной группировки других блоков. Группируемые блоки помещаются в поле content BEMJSON-декларации.
Варианты использования
Блок позволяет визуально группировать следующие блоки:
Open in a new window<div class="control-group" role="group"><span class="input input_theme_islands input_size_m input_type_search i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Имя" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="search"></span></span>
<span
class="input input_theme_islands input_size_m input_type_search i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Фамилия" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="search"></span></span><span class="input input_theme_islands input_size_m input_type_search i-bem"
data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Электронный адрес" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="search"></span></span>
</div>
{
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: 'Электронный адрес'
}
]
}
[
'control-group',
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
}
}
]
Open in a new window<div class="control-group" role="group"><button class="button button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Просмотреть корзину</span></button><button class="button button_theme_islands button_size_m button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text">История покупок</span></button><button class="button button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Проверить бонусный счет</span></button></div>
{
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: 'Проверить бонусный счет'
}
]
}
[
'control-group',
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="control-group" role="group"><span class="input input_theme_islands input_size_m input_type_search i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Введите запрос" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="search"></span></span>
<button
class="button button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Поиск</span></button>
</div>
{
block: 'control-group',
content: [
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
},
placeholder: 'Введите запрос'
},
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Поиск'
}
]
}
[
'control-group',
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
}
},
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="control-group" role="group"><span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Цена от" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
<span
class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="до" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span></span>
<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{}}'><input class="select__control" type="hidden" value="usd" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563727371 uniq14953563727372"
aria-labelledby="uniq14953563727373" type="button"><span class="button__text" id="uniq14953563727373">$</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":"usd"}}' role="option" id="uniq14953563727371" aria-checked="true">$</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":"euro"}}' role="option" id="uniq14953563727372" aria-checked="false">€</div>
</div>
</div>
</div>
</div>
{
block: 'control-group',
content: [
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Цена от'
},
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'до'
},
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
val: 'usd',
options: [
{
val: 'usd',
text: '$'
},
{
val: 'euro',
text: '€'
}
]
}
]
}
[
'control-group',
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
},
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
- dropdown (с модификатором
switcher в значении button)
Open in a new window<div class="control-group" role="group"><button class="button button_view_action button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Купить сейчас!</span></button>
<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem"
data-bem='{"popup":{},"dropdown":{"id":"uniq14953563722241"}}' id="uniq14953563722241" aria-hidden="true">Воспользуйтесь нашим специальным предложением: «50% скидка на доставку каждого пятого груза».</div><button class="button button_size_m button_theme_islands dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown__switcher dropdown__switcher_switcher_button button__control i-bem"
data-bem='{"button":{},"dropdown":{"id":"uniq14953563722241"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563722241" aria-expanded="false" role="button" type="button"><span class="button__text">Действующие скидки</span></button></div>
{
block: 'control-group',
content: [
{
block: 'button',
mods: {
view: 'action',
theme: 'islands',
size: 'm'
},
text: 'Купить сейчас!'
},
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: 'Действующие скидки',
popup: 'Воспользуйтесь нашим специальным предложением: «50% скидка на доставку каждого пятого груза».'
}
]
}
[
'control-group',
{
block: 'button',
mods: {
view: 'action',
theme: 'islands',
size: 'm'
}
},
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
- checkbox (с модификатором
type в значении button)
Open in a new window<div class="control-group" role="group"><label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="checkbox" aria-checked="false" type="button"><span class="button__text">Телевизоры</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="tv" value="1"></label>
<label
class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="checkbox" aria-checked="false" type="button"><span class="button__text">Фотокамеры</span></button><input class="checkbox__control"
type="checkbox" autocomplete="off" name="photo" value="1"></label><label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="checkbox" aria-checked="false" type="button"><span class="button__text">Электронные книги</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="book" value="1"></label></div>
{
block: 'control-group',
content: [
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'tv',
val: '1',
text: 'Телевизоры'
},
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'photo',
val: '1',
text: 'Фотокамеры'
},
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'book',
val: '1',
text: 'Электронные книги'
}
]
}
[
'control-group',
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]