Форум

Методология

Инструментарий

Платформа

Сообщество

desktop
touch-pad
touch-phone

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

Список с одиночным обязательным выбором (модификатор mode в значении radio)

Позволяет создать раскрывающийся список, в котором выбран ровно один пункт.

Если пункт не выбран, то по умолчанию выбирается первое значение из списка.

Open in a new window

Список с одиночным необязательным выбором (модификатор mode в значении radio-check)

Модификатор mode в значении radio-check, так же как и модификатор mode в значении radio, позволяет выбрать ровно один пункт из выпадающего списка. Принципиальное отличие в том, что в значении radio-check есть возможность оставить список без выбранных пунктов.

Open in a new window

Модификатор width

Допустимое значение: 'available'.

Способ использования: BEMJSON.

Позволяет растягивать кнопку раскрывающегося списка на максимально допустимую ширину.

Open in a new window

Модификатор disabled

Допустимое значение: true.

Способы использования: BEMJSON, JS.

Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.

Модификатор может быть установлен:

  • всему блоку
Open in a new window
  • отдельному пункту списка
Open in a new window

Модификатор 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

Модификатор size

Допустимые значения: 's', 'm', 'l', 'xl'.

Способ использования: BEMJSON.

Задает размер блоку.

Необходимо использовать с модификатором theme в значении islands.

s

Open in a new window

m

Open in a new window

l

Open in a new window

xl

Open in a new window

Специализированные поля блока

Поле name

Тип: String.

Определяет имя выпадающего списка.

Open in a new window

Поле val

Тип: String, Number, Array (если указан модификатор mode в значении check).

Определяет:

  • выбранный пункт списка.
Open in a new window
Open in a new window

Поле text

Тип: String.

Определяет значение, которое отображается в кнопке раскрывающегося списка, в случае, если ни один из пунктов выбран. Используется только для кнопки с модификатором type в значении check или в значении radio-check.

Open in a new window
Open in a new window

Поле options

Тип: Array.

Определяет массив объектов (пунктов списка) либо групп с опциональным названием.

Задает набор значений для каждого пункта.

Поле Тип Описание
val String, Number Значение, которое будет отправлено на сервер при выборе пункта. Обязательное поле.
text String Название пункта в списке.
checkedText String Текст, отображаемый вместо названия пункта в кнопке раскрывающегося списка. Задается только для списков с возможностью множественного выбора.
disabled Boolean Неактивное состояние отдельного пункта.
icon BEMJSON Иконка. Формируется блоком icon.
Open in a new window

Пункты раскрывающегося списка могут быть организованы в группы:

Поле Тип Описание
title String Название группы пунктов.
group Array Массив пунктов.
Open in a new window

Поле optionsMaxHeight

Тип: Number.

Определяет максимальную высоту раскрывающегося списка. Если все пункты списка не вмещаются, появляется полоса прокрутки.

Если значение не указано, высота раскрывающегося списка по умолчанию будет вычисляться в зависимости от количества пунктов.

Open in a new window

Поле id

Тип: String.

Определяет уникальный идентификатор раскрывающегося списка.

Open in a new window
Instance methods:
getVal
setVal
getName

Block select

Instance methods:

getVal():Any
description
Get value
setVal(val):select
description
Set value
parameters
val
*
getName():String
description
Get name