select
Используется для создания раскрывающегося списка с возможностью одиночного или множественного выбора.
Обзор блока
Модификаторы блока
| Модификатор |
Допустимые значения |
Способы использования |
Описание |
| mode |
'check', 'radio', 'radio-check' |
BEMJSON |
Режим выбора пунктов раскрывающегося списка. |
| width |
'available' |
BEMJSON |
Ширина кнопки раскрывающегося списка. |
| disabled |
true |
BEMJSON, JS |
Неактивное состояние. |
| focused |
true |
BEMJSON, JS |
Фокус на блоке. |
| theme |
'islands' |
BEMJSON |
Стилевое оформление. |
| size |
's', 'm', 'l', 'xl' |
BEMJSON |
Размер блока. |
Специализированные поля блока
| Поле |
Тип |
Описание |
| name |
String |
Имя раскрывающегося списка. |
| val |
String, Number, Array |
Выбранное значение из списка. Если блоку установлен модификатор mode в значении check, выбранные значения всегда оформляются в виде массива. |
| text |
String |
Значение, которое отображается в кнопке раскрывающегося списка, в случае, если ни один из пунктов выбран. Используется только для кнопки с модификатором type в значении check или в значении radio-check. |
| options |
Array |
Массив пунктов списка. |
| optionsMaxHeight |
Number |
Максимальная высота выпадающего списка. |
| id |
String |
Уникальный идентификатор раскрывающегося списка. |
| tabIndex |
Number |
Последовательность перехода между контролами при нажатии на Tab. |
Описание блока
Блок визуально представлен кнопкой и выпадающим списком.
Реализация блока поддерживает клавиатурное управление, если блок select находится в фокусе (установлен модификатор focused в значении true):
- При скрытом выпадающем списке ввод с клавиатуры одного из названий пунктов автоматически выбирает данный пункт и подставляет его имя в кнопку раскрывающегося списка.
- При раскрытом выпадающем списке ввод с клавиатуры одного из названий пунктов автоматически переводит фокус на данный пункт. Выбор происходит нажатием на кнопку
Пробел или Ввод.
- Клавиши
Пробел, Ввод, Вверх и Вниз показывают раскрывающийся список.
Модификаторы блока
Модификатор mode
Допустимые значения: 'check, 'radio', 'radio-check'.
Способ использования: BEMJSON.
Обязательный модификатор.
Список с множественным выбором (модификатор mode в значении check)
Позволяет выбрать произвольное количество пунктов в раскрывающемся списке.
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1","text":"Программа конференции"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><input class="select__control" type="hidden" name="select1" value="3" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem"
data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563399141 uniq14953563399142 uniq14953563399143" aria-multiselectable="true" aria-labelledby="uniq14953563399144" type="button"><span class="button__text" id="uniq14953563399144">Мастер-класс, Круглый стол</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_check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563399141" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563399142" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563399143" aria-checked="true">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
},
name: 'select1',
val: [
2,
3
],
text: 'Программа конференции',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
Список с одиночным обязательным выбором (модификатор mode в значении radio)
Позволяет создать раскрывающийся список, в котором выбран ровно один пункт.
Если пункт не выбран, то по умолчанию выбирается первое значение из списка.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select2"}}'><input class="select__control" type="hidden" name="select2" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563398041 uniq14953563398042 uniq14953563398043"
aria-labelledby="uniq14953563398044" type="button"><span class="button__text" id="uniq14953563398044">Мастер-класс</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_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563398041" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563398042" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563398043" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select2',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
Список с одиночным необязательным выбором (модификатор mode в значении radio-check)
Модификатор mode в значении radio-check, так же как и модификатор mode в значении radio, позволяет выбрать ровно один пункт из выпадающего списка. Принципиальное отличие в том, что в значении radio-check есть возможность оставить список без выбранных пунктов.
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select3","text":"—"}}'><input class="select__control" type="hidden" name="select3" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563417731 uniq14953563417732 uniq14953563417733"
aria-labelledby="uniq14953563417734" type="button"><span class="button__text" id="uniq14953563417734">Мастер-класс</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-check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563417731" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563417732" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563417733" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
},
name: 'select3',
val: 2,
text: '—',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
}
}
]
Модификатор width
Допустимое значение: 'available'.
Способ использования: BEMJSON.
Позволяет растягивать кнопку раскрывающегося списка на максимально допустимую ширину.
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m select_width_available i-bem" data-bem='{"select":{"name":"select4","text":"—"}}'><input class="select__control" type="hidden" name="select4" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563405151 uniq14953563405152 uniq14953563405153"
aria-labelledby="uniq14953563405154" type="button"><span class="button__text" id="uniq14953563405154">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</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-check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563405151" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563405152" aria-checked="true">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563405153" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm',
width: 'available'
},
name: 'select4',
val: 2,
text: '—',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm',
width: 'available'
}
}
]
Модификатор disabled
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Модификатор может быть установлен:
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m select_disabled i-bem" data-bem='{"select":{"name":"select4","text":"—"}}'><input class="select__control" type="hidden" name="select4" value="2" disabled="disabled" autocomplete="off"><button class="button button_size_m button_theme_islands button_disabled button_checked select__button button__control i-bem" data-bem='{"button":{}}'
role="listbox" aria-owns="uniq14953563409161 uniq14953563409162 uniq14953563409163" aria-labelledby="uniq14953563409164" type="button" disabled="disabled"><span class="button__text" id="uniq14953563409164">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</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_disabled menu_mode_radio-check select__menu menu__control i-bem" data-bem='{"menu":{"tabIndex":0}}' aria-disabled="true">
<div class="menu__item menu__item_disabled menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563409161" aria-disabled="true" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_disabled menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563409162" aria-disabled="true" aria-checked="true">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</div>
<div class="menu__item menu__item_disabled menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563409163" aria-disabled="true" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm',
disabled: true
},
name: 'select4',
val: 2,
text: '—',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm',
disabled: true
}
}
]
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select4","text":"—"}}'><input class="select__control" type="hidden" name="select4" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563403601 uniq14953563403602 uniq14953563403603"
aria-labelledby="uniq14953563403604" type="button"><span class="button__text" id="uniq14953563403604">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</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-check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_disabled menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563403601" aria-disabled="true" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563403602" aria-checked="true">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563403603" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
},
name: 'select4',
val: 2,
text: '—',
options: [
{
val: 1,
text: 'Доклад',
disabled: true
},
{
val: 2,
text: 'Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
}
}
]
Модификатор focused
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Выставляется автоматически при получении блока фокуса.
Отвечает за наличие фокуса на блоке.
{
block : 'select',
mods : { mode : 'radio-check', theme : 'islands', size : 'm', focused : true },
name : 'select4',
val : 2,
text : '—',
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}
Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.
Модификатор theme
Допустимое значение: 'islands'.
Способ использования: BEMJSON.
Модификатор отвечает за стилевое оформление блока.
Необходимо использовать с модификатором size.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563415341 uniq14953563415342 uniq14953563415343"
aria-labelledby="uniq14953563415344" type="button"><span class="button__text" id="uniq14953563415344">Мастер-класс</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_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563415341" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563415342" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563415343" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
Модификатор size
Допустимые значения: 's', 'm', 'l', 'xl'.
Способ использования: BEMJSON.
Задает размер блоку.
Необходимо использовать с модификатором theme в значении islands.
s
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_s i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_s button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563412921 uniq14953563412922 uniq14953563412923"
aria-labelledby="uniq14953563412924" type="button"><span class="button__text" id="uniq14953563412924">Мастер-класс</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_s menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563412921" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563412922" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563412923" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 's'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 's'
}
}
]
m
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563415341 uniq14953563415342 uniq14953563415343"
aria-labelledby="uniq14953563415344" type="button"><span class="button__text" id="uniq14953563415344">Мастер-класс</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_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563415341" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563415342" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563415343" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
l
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_l i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_l button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563400821 uniq14953563400822 uniq14953563400823"
aria-labelledby="uniq14953563400824" type="button"><span class="button__text" id="uniq14953563400824">Мастер-класс</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_l menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563400821" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563400822" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563400823" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'l'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'l'
}
}
]
xl
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_xl i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_xl button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563407551 uniq14953563407552 uniq14953563407553"
aria-labelledby="uniq14953563407554" type="button"><span class="button__text" id="uniq14953563407554">Мастер-класс</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_xl menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563407551" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563407552" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563407553" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'xl'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'xl'
}
}
]
Специализированные поля блока
Поле name
Тип: String.
Определяет имя выпадающего списка.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="1" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563399691 uniq14953563399692 uniq14953563399693"
aria-labelledby="uniq14953563399694" type="button"><span class="button__text" id="uniq14953563399694">Report</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":1}}' role="option" id="uniq14953563399691" aria-checked="true">Report</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563399692" aria-checked="false">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563399693" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select1',
options: [
{
val: 1,
text: 'Report'
},
{
val: 2,
text: 'Workshop'
},
{
val: 3,
text: 'Round-table conference'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
Поле val
Тип: String, Number, Array (если указан модификатор mode в значении check).
Определяет:
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563415341 uniq14953563415342 uniq14953563415343"
aria-labelledby="uniq14953563415344" type="button"><span class="button__text" id="uniq14953563415344">Мастер-класс</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_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563415341" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563415342" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563415343" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1","text":"Программа конференции"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><input class="select__control" type="hidden" name="select1" value="3" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem"
data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563399141 uniq14953563399142 uniq14953563399143" aria-multiselectable="true" aria-labelledby="uniq14953563399144" type="button"><span class="button__text" id="uniq14953563399144">Мастер-класс, Круглый стол</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_check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563399141" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563399142" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563399143" aria-checked="true">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
},
name: 'select1',
val: [
2,
3
],
text: 'Программа конференции',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
Поле text
Тип: String.
Определяет значение, которое отображается в кнопке раскрывающегося списка, в случае, если ни один из пунктов выбран. Используется только для кнопки с модификатором type в значении check или в значении radio-check.
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select3","text":"Обучатор"}}'><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563411891 uniq14953563411892 uniq14953563411893" aria-labelledby="uniq14953563411894" type="button"><span class="button__text" id="uniq14953563411894">Обучатор</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-check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563411891" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563411892" aria-checked="false">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563411893" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
},
name: 'select3',
text: 'Обучатор',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1","text":"Ничего не выбрано"}}'><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563404381 uniq14953563404382 uniq14953563404383" aria-multiselectable="true" aria-labelledby="uniq14953563404384"
type="button"><span class="button__text" id="uniq14953563404384">Ничего не выбрано</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_check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563404381" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563404382" aria-checked="false">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563404383" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
},
name: 'select1',
text: 'Ничего не выбрано',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
Поле options
Тип: Array.
Определяет массив объектов (пунктов списка) либо групп с опциональным названием.
Задает набор значений для каждого пункта.
| Поле |
Тип |
Описание |
val |
String, Number |
Значение, которое будет отправлено на сервер при выборе пункта. Обязательное поле. |
text |
String |
Название пункта в списке. |
checkedText |
String |
Текст, отображаемый вместо названия пункта в кнопке раскрывающегося списка. Задается только для списков с возможностью множественного выбора. |
disabled |
Boolean |
Неактивное состояние отдельного пункта. |
icon |
BEMJSON |
Иконка. Формируется блоком icon. |
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select5","text":"Подписаться на новости"}}'><input class="select__control" type="hidden" name="select5" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563406771 uniq14953563406772"
aria-multiselectable="true" aria-labelledby="uniq14953563406773" type="button"><span class="button__text" id="uniq14953563406773">VKontakte</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_check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"checkedText":"tw","text":"Twitter","val":1}}' role="option" id="uniq14953563406771" aria-checked="false"><span class="icon icon_social_twitter"></span>Twitter</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"checkedText":"vk","text":"VKontakte","val":2}}' role="option" id="uniq14953563406772"
aria-checked="true"><span class="icon icon_social_vk"></span>VKontakte</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
},
name: 'select5',
val: [
2
],
text: 'Подписаться на новости',
options: [
{
val: 1,
text: 'Twitter',
checkedText: 'tw',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
},
{
val: 2,
text: 'VKontakte',
checkedText: 'vk',
icon: {
block: 'icon',
mods: {
social: 'vk'
}
}
}
]
}
[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
Пункты раскрывающегося списка могут быть организованы в группы:
| Поле |
Тип |
Описание |
title |
String |
Название группы пунктов. |
group |
Array |
Массив пунктов. |
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select5","text":"Программа конференции"}}'><input class="select__control" type="hidden" name="select5" value="2" autocomplete="off"><input class="select__control" type="hidden" name="select5" value="5" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem"
data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563418841 uniq14953563418842 uniq14953563418843 uniq14953563418844 uniq14953563418845" aria-multiselectable="true" aria-labelledby="uniq14953563418846" type="button"><span class="button__text" id="uniq14953563418846">Доклад №2, Мастер-класс №2</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_check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__group" role="group" aria-labelledby="uniq14953563418847">
<div class="menu__group-title" role="presentation" id="uniq14953563418847">Теория</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563418841" aria-checked="false">Доклад №1</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563418842" aria-checked="true">Доклад №2</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563418843" aria-checked="false">Доклад №3</div>
</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953563418848">
<div class="menu__group-title" role="presentation" id="uniq14953563418848">Практика</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="option" id="uniq14953563418844" aria-checked="false">Мастер-класс №1</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":5}}' role="option" id="uniq14953563418845" aria-checked="true">Мастер-класс №2</div>
</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
},
name: 'select5',
val: [
2,
5
],
text: 'Программа конференции',
options: [
{
title: 'Теория',
group: [
{
val: 1,
text: 'Доклад №1'
},
{
val: 2,
text: 'Доклад №2'
},
{
val: 3,
text: 'Доклад №3'
}
]
},
{
title: 'Практика',
group: [
{
val: 4,
text: 'Мастер-класс №1'
},
{
val: 5,
text: 'Мастер-класс №2'
}
]
}
]
}
[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
Поле optionsMaxHeight
Тип: Number.
Определяет максимальную высоту раскрывающегося списка. Если все пункты списка не вмещаются, появляется полоса прокрутки.
Если значение не указано, высота раскрывающегося списка по умолчанию будет вычисляться в зависимости от количества пунктов.
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select5","optionsMaxHeight":100,"text":"Программа конференции"}}'><input class="select__control" type="hidden" name="select5" value="2" autocomplete="off"><input class="select__control" type="hidden" name="select5" value="5" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem"
data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563413461 uniq14953563413462 uniq14953563413463 uniq14953563413464 uniq14953563413465" aria-multiselectable="true" aria-labelledby="uniq14953563413466" type="button"><span class="button__text" id="uniq14953563413466">Доклад №2, Мастер-класс №2</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_check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__group" role="group" aria-labelledby="uniq14953563413467">
<div class="menu__group-title" role="presentation" id="uniq14953563413467">Теория</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563413461" aria-checked="false">Доклад №1</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563413462" aria-checked="true">Доклад №2</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563413463" aria-checked="false">Доклад №3</div>
</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953563413468">
<div class="menu__group-title" role="presentation" id="uniq14953563413468">Практика</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="option" id="uniq14953563413464" aria-checked="false">Мастер-класс №1</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":5}}' role="option" id="uniq14953563413465" aria-checked="true">Мастер-класс №2</div>
</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
},
name: 'select5',
val: [
2,
5
],
optionsMaxHeight: 100,
text: 'Программа конференции',
options: [
{
title: 'Теория',
group: [
{
val: 1,
text: 'Доклад №1'
},
{
val: 2,
text: 'Доклад №2'
},
{
val: 3,
text: 'Доклад №3'
}
]
},
{
title: 'Практика',
group: [
{
val: 4,
text: 'Мастер-класс №1'
},
{
val: 5,
text: 'Мастер-класс №2'
}
]
}
]
}
[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
Поле id
Тип: String.
Определяет уникальный идентификатор раскрывающегося списка.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="1" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563402801 uniq14953563402802 uniq14953563402803"
aria-labelledby="uniq14953563402804" id="Unique_1" type="button"><span class="button__text" id="uniq14953563402804">Доклад</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":1}}' role="option" id="uniq14953563402801" aria-checked="true">Доклад</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563402802" aria-checked="false">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563402803" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select1',
id: 'Unique_1',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]