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<div class="menu menu_theme_islands menu_size_m 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="menuitem" id="uniq14953582393491">Море</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitem" id="uniq14953582393492">Горы</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
elem: 'item',
val: 1,
content: 'Море'
},
{
elem: 'item',
val: 2,
content: 'Горы'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
'item'
]
}
]
deps
Меню с множественным выбором (модификатор mode
в значении check
)
Позволяет выбрать произвольное количество пунктов меню.
Open in a new window<div class="menu menu_theme_islands menu_size_m menu_mode_check 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="menuitemcheckbox" id="uniq14953582389691" aria-checked="true">Отдых в горах</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953582389692" aria-checked="false">Отдых на море</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953582389693" aria-checked="true">Отдых на даче</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
val: [
1,
3
],
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
},
{
elem: 'item',
val: 3,
content: 'Отдых на даче'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
elems: [
'item'
]
}
]
deps
Меню с одиночным обязательным выбором (модификатор mode
в значении radio
)
Позволяет создать меню, в котором обязательно выбран ровно один пункт.
Если пункт не выбран, то по умолчанию выбирается первое значение из списка.
Open in a new window<div class="menu menu_theme_islands menu_size_m 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="uniq14953582409221" aria-checked="true">Отдых в горах</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953582409222" aria-checked="false">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item'
]
}
]
deps
Меню с одиночным необязательным выбором (модификатор mode
в значении radio-check
)
Модификатор mode
в значении radio-check
, так же как и модификатор mode в значении radio, позволяет выбрать ровно один пункт меню. Принципиальное отличие в том, что в значении radio-check
есть возможность оставить меню без выбранных пунктов.
Open in a new window<div class="menu menu_theme_islands menu_size_m 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="uniq14953582398321" 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="uniq14953582398322" aria-checked="true">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
val: 2,
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
elems: [
'item'
]
}
]
deps
Модификатор disabled
Допустимое значение: true
.
Способы использования: BEMJSON
, JS
.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Если блоку menu
устанавливается модификатор disabled
, то все вложенные в него блоки menu__item
также становятся неактивными.
Open in a new window<div class="menu menu_theme_islands menu_size_m menu_mode_radio-check menu_disabled menu__control i-bem" data-bem='{"menu":{"tabIndex":0}}' role="menu" aria-disabled="true">
<div class="menu__item menu__item_theme_islands menu__item_disabled i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953582391951" aria-disabled="true" aria-checked="false">Отдых в горах</div>
<div class="menu__item menu__item_theme_islands menu__item_disabled i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953582391952" aria-disabled="true" aria-checked="false">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check',
disabled: true
},
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check',
disabled: true
},
elems: [
'item'
]
}
]
deps
Модификатор disabled
в значении true
может быть выставлен отдельным пунктам меню:
Open in a new window<div class="menu menu_theme_islands menu_size_m 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="uniq14953582405261" 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="uniq14953582405262" aria-checked="true">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
val: 2,
content: [
{
elem: 'item',
mods: {
disabled: true
},
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
elems: [
{
elem: 'item',
mods: {
disabled: true
}
}
]
}
]
deps
Модификатор 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<div class="menu menu_theme_islands menu_mode_check menu_size_m 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="menuitemcheckbox" id="uniq14953582414651" aria-checked="true">Отдых в горах</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953582414652" aria-checked="false">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
val: [
1
],
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
elems: [
'item'
]
}
]
deps
Модификатор size
Допустимые значения: 's'
, 'm'
, 'l'
, 'xl'
.
Способ использования: BEMJSON
.
Задает размер блоку.
Необходимо использовать с модификатором theme в значении islands
.
s
Open in a new window<div class="menu menu_theme_islands menu_mode_check menu_size_s 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="uniq14953582415471" aria-checked="false">Отдых в горах</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953582415472" aria-checked="false">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 's'
},
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 's'
},
elems: [
'item'
]
}
]
deps
m
Open in a new window<div class="menu menu_theme_islands menu_mode_check menu_size_m 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="uniq14953582411491" 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="uniq14953582411492" aria-checked="true">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
val: [
2
],
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
elems: [
'item'
]
}
]
deps
l
Open in a new window<div class="menu menu_theme_islands menu_size_m 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="uniq14953582403761" 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="uniq14953582403762" aria-checked="true">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
val: [
2
],
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
elems: [
'item'
]
}
]
deps
xl
Open in a new window<div class="menu menu_theme_islands menu_mode_check menu_size_xl 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="uniq14953582396921" 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="uniq14953582396922" aria-checked="true">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'xl'
},
val: [
2
],
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'xl'
},
elems: [
'item'
]
}
]
deps
Специализированные поля блока
Поле content
Тип: Array
.
Определяет перечень пунктов меню.
Open in a new window<div class="menu menu_theme_islands menu_size_m 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="menuitem" id="uniq14953582394501">Отпуск на работе</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitem" id="uniq14953582394502">Отпуск на диване</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
elem: 'item',
val: 1,
content: 'Отпуск на работе'
},
{
elem: 'item',
val: 2,
content: 'Отпуск на диване'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
'item'
]
}
]
deps
Поле val
Тип: String
, Number
, Array
.
Определяет:
- Выбранный пункт меню. В таком случае используется тип поля
String
или Number
.
Open in a new window<div class="menu menu_theme_islands menu_size_m 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="uniq14953582408461" 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="uniq14953582408462" aria-checked="true">Отпуск на диване</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 2,
content: [
{
elem: 'item',
val: 1,
content: 'Отпуск на работе'
},
{
elem: 'item',
val: 2,
content: 'Отпуск на диване'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item'
]
}
]
deps
Open in a new window<div class="menu menu_theme_islands menu_size_m menu_mode_check 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="menuitemcheckbox" id="uniq14953582401261" aria-checked="true">Отдых в горах</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953582401262" aria-checked="true">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
val: [
1,
2
],
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
elems: [
'item'
]
}
]
deps
Элементы блока
Элемент group
Служит для визуальной группировки пунктов меню. Не влияет на общую логику выбора пунктов.
Open in a new window<div class="menu menu_theme_islands menu_size_m 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="uniq14953582395251" aria-checked="false">Отпуск на работе</div>
<div class="menu__group" role="group">
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953582395252" aria-checked="true">Отпуск в горах</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953582395253" aria-checked="false">Отпуск на море</div>
</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="menuitemradio" id="uniq14953582395254" aria-checked="false">Отпуск на диване</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 2,
content: [
{
elem: 'item',
val: 1,
content: 'Отпуск на работе'
},
{
elem: 'group',
content: [
{
elem: 'item',
val: 2,
content: 'Отпуск в горах'
},
{
elem: 'item',
val: 3,
content: 'Отпуск на море'
}
]
},
{
elem: 'item',
val: 4,
content: 'Отпуск на диване'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item',
'group'
]
}
]
deps
Специализированные поля элементов блока
Специализированное поле title
элемента group
Тип: String
.
Определяет заголовок группы пунктов.
Open in a new window<div class="menu menu_theme_islands menu_size_m 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="uniq14953582391101" aria-checked="false">Работа</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953582391102">
<div class="menu__group-title" role="presentation" id="uniq14953582391102">Активный отдых</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953582391103" aria-checked="true">В горах</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953582391104" aria-checked="false">На море</div>
</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 2,
content: [
{
elem: 'item',
val: 1,
content: 'Работа'
},
{
elem: 'group',
title: 'Активный отдых',
content: [
{
elem: 'item',
val: 2,
content: 'В горах'
},
{
elem: 'item',
val: 3,
content: 'На море'
}
]
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item',
'group'
]
}
]
deps
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<div class="menu menu_theme_islands menu_size_m menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_type_link menu__item_theme_islands i-bem" data-bem='{"menu__item":{}}' role="menuitem" id="uniq14953582413031"><a class="link link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a></div>
<div class="menu__item menu__item_type_link menu__item_theme_islands i-bem" data-bem='{"menu__item":{}}' role="menuitem" id="uniq14953582413032"><a class="link link__control i-bem" data-bem='{"link":{}}' role="link" href="https://tech.yandex.ru/">tech.yandex.ru</a></div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
elem: 'item',
elemMods: {
type: 'link'
},
content: {
block: 'link',
url: 'https://bem.info/',
content: 'bem.info'
}
},
{
elem: 'item',
elemMods: {
type: 'link'
},
content: {
block: 'link',
url: 'https://tech.yandex.ru/',
content: 'tech.yandex.ru'
}
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
{
elem: 'item',
mods: {
type: 'link'
}
}
]
},
{
block: 'link',
elems: [
{
elem: 'item',
mods: {
type: 'link'
}
}
]
}
]
deps
Модификатор disabled
Допустимое значение: true
.
Способы использования: BEMJSON
, JS
.
Модификатор отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Open in a new window<div class="menu menu_theme_islands menu_size_m 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":{}}' role="menuitem" id="uniq14953582389061" aria-disabled="true">BH</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{}}' role="menuitem" id="uniq14953582389062">BEMHTML</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
elem: 'item',
elemMods: {
disabled: true
},
content: 'BH'
},
{
elem: 'item',
content: 'BEMHTML'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
{
elem: 'item',
mods: {
disabled: true
}
}
]
}
]
deps
Модификатор hovered
Допустимое значение: true
.
Способ использования: – .
Выставляется автоматически при наведении курсором на пункт меню.
Специализированные поля блока
Поле val
Тип: Number
, String
.
Определяет значение пункта меню.
Open in a new window<div class="menu menu_theme_islands menu_size_m 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":"item-1"}}' role="menuitemradio" id="uniq14953582416291" aria-checked="true">BH</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":"item-2"}}' role="menuitemradio" id="uniq14953582416292" aria-checked="false">BEMHTML</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 'item-1',
content: [
{
elem: 'item',
val: 'item-1',
content: 'BH'
},
{
elem: 'item',
val: 'item-2',
content: 'BEMHTML'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item'
]
}
]
deps