Форум

Методология

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

Платформа

Сообщество

desktop
touch-pad
touch-phone

menu

Используется для создания различных типов меню.

Обзор блока

Модификаторы блока

Модификатор Допустимые значения Способы использования Описание
mode 'radio', 'radio-check', 'check' BEMJSON Тип меню.
disabled true BEMJSON, JS Неактивное состояние.
focused true BEMJSON, JS Фокус на блоке.
theme 'islands' BEMJSON Стилевое оформление.
size 's', 'm', 'l', 'xl' BEMJSON Размер блока.

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

Поле Тип Описание
content Array Массив пунктов меню.
val String, Number, Array Выбранное значение из списка. Если блоку установлен модификатор mode в значении check, выбранные значения всегда оформляются в виде массива.

Элементы блока

Элемент Способы использования Описание
group BEMJSON Визуальная группировка пунктов меню. Поле content является обязательным для элемента group.

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

Элемент Поле Тип Описание
group title String Заголовок группы пунктов.

Описание блока

Блок предоставляет возможность изменять внешний вид меню и управлять поведением вложенных независимых блоков – пунктов меню.

Реализация блока поддерживает клавиатурное управление: если блок menu находится в фокусе (установлен модификатор focused в значении true), ввод с клавиатуры одного из названий пунктов меню автоматически переводит фокус на данный пункт. Выбор происходит нажатием на кнопку Пробел или Ввод.

Модификаторы блока

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

Допустимые значения: 'check, 'radio', 'radio-check'.

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

В зависимости от выбранного значения модификатора mode доступны следующие типы блока:

Простой список (модификатор mode не установлен)

Без указания модификатора mode создается простой список без возможности выбрать пункт.

Open in a new window

Меню с множественным выбором (модификатор 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

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

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

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

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

Если блоку menu устанавливается модификатор disabled, то все вложенные в него блоки menu__item также становятся неактивными.

Open in a new window

Модификатор disabled в значении true может быть выставлен отдельным пунктам меню:

Open in a new window

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

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

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

Выставляется автоматически при получении блоком фокуса.

Отвечает за наличие фокуса на блоке.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check', focused : true },
    val : 2,
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Отдых в горах'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Отдых на море'
        }
    ]
}

Способ установки фокуса на блок определяет выбор модификатора: 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

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

Поле content

Тип: Array.

Определяет перечень пунктов меню.

Open in a new window

Поле val

Тип: String, Number, Array.

Определяет:

  • Выбранный пункт меню. В таком случае используется тип поля String или Number.
Open in a new window
Open in a new window

Элементы блока

Элемент group

Служит для визуальной группировки пунктов меню. Не влияет на общую логику выбора пунктов.

Open in a new window

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

Специализированное поле title элемента group

Тип: String.

Определяет заголовок группы пунктов.

Open in a new window

menu__item

Используется как составная часть блока menu.

Обзор блока

Модификаторы блока

Модификатор Допустимые значения Способы использования Описание
type 'link' BEMJSON Пункт меню, реализованный блоком link.
disabled true BEMJSON, JS Неактивное состояние.
hovered true Наведение курсором.

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

Поле Тип Описание
val Number, String Значение пункта меню.

Описание блока

menu__item предоставляет возможность изменять состояние, содержимое и тип пунктов меню. Используется только в составе блока menu.

Модификаторы блока

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

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

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

Используется для создания пунктов меню, реализованных с помощью блока link, который помещается в поле content BEMJSON-декларации блока.

Open in a new window

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

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

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

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

Open in a new window

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

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

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

Выставляется автоматически при наведении курсором на пункт меню.

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

Поле val

Тип: Number, String.

Определяет значение пункта меню.

Open in a new window

Block menu

Augments:control

Instance methods:

getItems():menu__item
description
Returns items
setContent(content):menu
description
Sets content
parameters
content
String, jQuery
searchItemByKeyboardEvent(e):menu__item
description
Search menu item by keyboard event
parameters
e
jQuery.Event
_onFocus()override
_onBlur()override

menu__item

Instance methods:

isValEq(val):Boolean
description
Checks whether given value is equal to current value
parameters
val
String, Number
getVal():Any
description
Returns item value
getText():String
description
Returns item text

menu_mode

Instance methods:

getVal():Any
description
Returns menu value
_getVal():Anyprotectedabstract
setVal(val):menu
description
Sets menu value
parameters
val
*
_setVal(val):Booleanprotectedabstract
parameters
val
*
setContent()override
description
Sets content

menu_mode_check

Instance methods:

_getVal()override
_setVal(vals)override
parameters
vals
Array
_onItemClick()override

menu_mode_radio-check

Instance methods:

_getVal()override
_setVal()override
_onItemClick()override

menu_mode_radio

Instance methods:

_getVal()override
_setVal()override
_onItemClick()override