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="uniq14953600807281"><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="uniq14953600807282"><a class="link link__control i-bem" data-bem='{"link":{}}' role="link" href="https://tech.yandex.ru/">tech.yandex.ru</a></div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
block: 'menu-item',
mods: {
type: 'link'
},
content: {
block: 'link',
url: 'https://bem.info/',
content: 'bem.info'
}
},
{
block: 'menu-item',
mods: {
type: 'link'
},
content: {
block: 'link',
url: 'https://tech.yandex.ru/',
content: 'tech.yandex.ru'
}
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
}
},
{
block: 'menu-item',
mods: {
type: 'link'
}
},
'link'
]
Модификатор 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="uniq14953600807741" aria-disabled="true">BH</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{}}' role="menuitem" id="uniq14953600807742">BEMHTML</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
block: 'menu-item',
mods: {
disabled: true
},
content: 'BH'
},
{
block: 'menu-item',
content: 'BEMHTML'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
}
},
{
block: 'menu-item',
mods: {
disabled: true
}
}
]
Модификатор 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="uniq14953600808171" 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="uniq14953600808172" aria-checked="false">BEMHTML</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 'item-1',
content: [
{
block: 'menu-item',
val: 'item-1',
content: 'BH'
},
{
block: 'menu-item',
val: 'item-2',
content: 'BEMHTML'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
}
},
'menu-item'
]