Используется для создания раскрывающегося списка с возможностью одиночного или множественного выбора.
Модификатор | Допустимые значения | Способы использования | Описание |
---|---|---|---|
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
):
- При скрытом выпадающем списке ввод с клавиатуры одного из названий пунктов автоматически выбирает данный пункт и подставляет его имя в кнопку раскрывающегося списка.
- При раскрытом выпадающем списке ввод с клавиатуры одного из названий пунктов автоматически переводит фокус на данный пункт. Выбор происходит нажатием на кнопку
Пробел
илиВвод
. - Клавиши
Пробел
,Ввод
,Вверх
иВниз
показывают раскрывающийся список.
Допустимые значения: 'check
, 'radio'
, 'radio-check'
.
Способ использования: BEMJSON
.
Обязательный модификатор.
Позволяет выбрать произвольное количество пунктов в раскрывающемся списке.
{
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 : 'radio', theme : 'islands', size : 'm' },
name : 'select2',
val : 2,
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}
Модификатор mode
в значении radio-check
, так же как и модификатор mode в значении radio, позволяет выбрать ровно один пункт из выпадающего списка. Принципиальное отличие в том, что в значении radio-check
есть возможность оставить список без выбранных пунктов.
{
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 : 'Круглый стол' }
]
}
Допустимое значение: 'available'
.
Способ использования: BEMJSON
.
Позволяет растягивать кнопку раскрывающегося списка на максимально допустимую ширину.
{
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 : 'Круглый стол' }
]
}
Допустимое значение: true
.
Способы использования: BEMJSON
, JS
.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Модификатор может быть установлен:
- всему блоку
{
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' },
name : 'select4',
val : 2,
text : '—',
options : [
{ val : 1, text : 'Доклад', disabled : true },
{ val : 2, text : 'Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем' },
{ val : 3, text : 'Круглый стол' }
]
}
Допустимое значение: 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
. Читать подробности.
Допустимое значение: 'islands'
.
Способ использования: BEMJSON
.
Модификатор отвечает за стилевое оформление блока.
Необходимо использовать с модификатором size.
{
block : 'select',
mods : { mode : 'radio', theme : 'islands', size : 'm' },
name : 'select1',
val : 2,
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}
Допустимые значения: 's'
, 'm'
, 'l'
, 'xl'
.
Способ использования: BEMJSON
.
Задает размер блоку.
Необходимо использовать с модификатором theme в значении islands
.
s
{
block : 'select',
mods : { mode : 'radio', theme : 'islands', size : 's' },
name : 'select1',
val : 2,
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}
m
{
block : 'select',
mods : { mode : 'radio', theme : 'islands', size : 'm' },
name : 'select1',
val : 2,
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}
l
{
block : 'select',
mods : { mode : 'radio', theme : 'islands', size : 'l' },
name : 'select1',
val : 2,
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}
xl
{
block : 'select',
mods : { mode : 'radio', theme : 'islands', size : 'xl' },
name : 'select1',
val : 2,
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}
Тип: String
.
Определяет имя выпадающего списка.
{
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' }
]
}
Тип: String
, Number
, Array
(если указан модификатор mode в значении check).
Определяет:
- выбранный пункт списка.
{
block : 'select',
mods : { mode : 'radio', theme : 'islands', size : 'm' },
name : 'select1',
val : 2,
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}
- список выбранных пунктов списка, если блоку установлен модификатор mode в значении check, и используется тип поля
Array
.
{
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 : 'Круглый стол' }
]
}
Тип: String
.
Определяет значение, которое отображается в кнопке раскрывающегося списка, в случае, если ни один из пунктов выбран. Используется только для кнопки с модификатором type в значении check или в значении radio-check.
{
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 : 'check', theme : 'islands', size : 'm' },
name : 'select1',
text : 'Ничего не выбрано',
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}
Тип: Array
.
Определяет массив объектов (пунктов списка) либо групп с опциональным названием.
Задает набор значений для каждого пункта.
Поле | Тип | Описание |
---|---|---|
val |
String , Number |
Значение, которое будет отправлено на сервер при выборе пункта. Обязательное поле. |
text |
String |
Название пункта в списке. |
checkedText |
String |
Текст, отображаемый вместо названия пункта в кнопке раскрывающегося списка. Задается только для списков с возможностью множественного выбора. |
disabled |
Boolean |
Неактивное состояние отдельного пункта. |
icon |
BEMJSON |
Иконка. Формируется блоком icon. |
{
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' } }
}
]
}
Пункты раскрывающегося списка могут быть организованы в группы:
Поле | Тип | Описание |
---|---|---|
title |
String |
Название группы пунктов. |
group |
Array |
Массив пунктов. |
{
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' }
]
}
]
}
Тип: Number
.
Определяет максимальную высоту раскрывающегося списка. Если все пункты списка не вмещаются, появляется полоса прокрутки.
Если значение не указано, высота раскрывающегося списка по умолчанию будет вычисляться в зависимости от количества пунктов.
{
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' }
]
}
]
}
Тип: String
.
Определяет уникальный идентификатор раскрывающегося списка.
{
block : 'select',
mods : { mode : 'radio', theme : 'islands', size : 'm' },
name : 'select1',
id : 'Unique_1',
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}