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 button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581821424">Мастер-класс, Круглый стол</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953581821421" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953581821422" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953581821423" aria-checked="true">Круглый стол</div>
</div>
</div>
</div>
HTML{
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: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
deps
Список с одиночным обязательным выбором (модификатор 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581819564">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581819561" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581819562" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581819563" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select2',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
deps
Список с одиночным необязательным выбором (модификатор 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581850174">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581850171" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581850172" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581850173" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
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: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
}
}
]
deps
Модификатор 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581831594">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581831591" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581831592" aria-checked="true">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581831593" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
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: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm',
width: 'available'
}
}
]
deps
Модификатор 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 button__control i-bem" data-bem='{"button":{}}' role="button"
type="button" disabled="disabled"><span class="button__text" id="uniq14953581835484">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</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 menu__control i-bem" data-bem='{"menu":{"tabIndex":0}}' role="menu" aria-disabled="true">
<div class="menu__item menu__item_disabled menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581835481" 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="menuitemradio" id="uniq14953581835482" 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="menuitemradio" id="uniq14953581835483" aria-disabled="true"
aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
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: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm',
disabled: true
}
}
]
deps
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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581828504">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_disabled menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581828501" 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="menuitemradio" id="uniq14953581828502" aria-checked="true">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581828503" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
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: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
}
}
]
deps
Модификатор 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581846934">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581846931" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581846932" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581846933" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
deps
Модификатор 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581842074">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581842071" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581842072" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581842073" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 's'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 's'
}
}
]
deps
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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581846934">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581846931" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581846932" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581846933" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
deps
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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581824674">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581824671" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581824672" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581824673" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'l'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'l'
}
}
]
deps
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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581834184">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581834181" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581834182" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581834183" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'xl'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'xl'
}
}
]
deps
Специализированные поля блока
Поле 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581822444">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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581822441" aria-checked="true">Report</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581822442" aria-checked="false">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581822443" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581846934">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581846931" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581846932" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581846933" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
deps
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 button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581821424">Мастер-класс, Круглый стол</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953581821421" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953581821422" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953581821423" aria-checked="true">Круглый стол</div>
</div>
</div>
</div>
HTML{
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: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581838914">Обучатор</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581838911" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581838912" aria-checked="false">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581838913" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
},
name: 'select3',
text: 'Обучатор',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
}
}
]
deps
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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581830454">Ничего не выбрано</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953581830451" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953581830452" aria-checked="false">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953581830453" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
},
name: 'select1',
text: 'Ничего не выбрано',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581833293">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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953581833291" 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":{"val":2}}' role="menuitemcheckbox" id="uniq14953581833292" aria-checked="true"><span class="icon icon_social_vk"></span>VKontakte</div>
</div>
</div>
</div>
HTML{
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'
}
}
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
deps
Пункты раскрывающегося списка могут быть организованы в группы:
Поле |
Тип |
Описание |
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 button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581852036">Доклад №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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__group" role="group" aria-labelledby="uniq14953581852037">
<div class="menu__group-title" role="presentation" id="uniq14953581852037">Теория</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953581852031" 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="menuitemcheckbox" id="uniq14953581852032" aria-checked="true">Доклад №2</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953581852033" aria-checked="false">Доклад №3</div>
</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953581852038">
<div class="menu__group-title" role="presentation" id="uniq14953581852038">Практика</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="menuitemcheckbox" id="uniq14953581852034" 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="menuitemcheckbox" id="uniq14953581852035" aria-checked="true">Мастер-класс №2</div>
</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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 button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581843346">Доклад №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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__group" role="group" aria-labelledby="uniq14953581843347">
<div class="menu__group-title" role="presentation" id="uniq14953581843347">Теория</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953581843341" 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="menuitemcheckbox" id="uniq14953581843342" aria-checked="true">Доклад №2</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953581843343" aria-checked="false">Доклад №3</div>
</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953581843348">
<div class="menu__group-title" role="presentation" id="uniq14953581843348">Практика</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="menuitemcheckbox" id="uniq14953581843344" 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="menuitemcheckbox" id="uniq14953581843345" aria-checked="true">Мастер-класс №2</div>
</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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 button__control i-bem" data-bem='{"button":{}}' role="button" id="Unique_1" type="button"><span class="button__text" id="uniq14953581827444">Доклад</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581827441" aria-checked="true">Доклад</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581827442" aria-checked="false">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581827443" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
HTML{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select1',
id: 'Unique_1',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
deps