dropdown
Используется для реализации составного блока, который объединяет всплывающий блок (popup) и вызывающий его управляющий компонент (например, кнопку или ссылку).
Обзор блока
Модификаторы блока
| Модификатор |
Допустимые значения |
Способы использования |
Описание |
| switcher |
'link', 'button' |
BEMJSON |
Тип управляющего компонента. Модификатор является обязательным. |
| disabled |
true |
BEMJSON, JS |
Неактивное состояние. |
| opened |
true |
JS |
Отображение всплывающего блока на странице. |
| theme |
'islands' |
BEMJSON |
Стилевое оформление. |
| size |
's', 'm', 'l', 'xl' |
BEMJSON |
Размер управляющего компонента. |
Специализированные поля блока
Описание блока
Модификаторы блока
Модификатор switcher
Допустимые значения: link, button.
Способ использования: BEMJSON.
Модификатор switcher отвечает за то, какой блок будет использоваться в качестве управляющего компонента:
Ссылка как управляющий компонент (модификатор switcher в значении link)
Используется для представления управляющего компонента блоком link.
Нажатие на ссылку вызывает всплывающий блок. Переход по ссылке не осуществляется.
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563534791"}}' id="uniq14953563534791" aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><span class="link link_pseudo link_theme_islands dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m dropdown__switcher dropdown__switcher_switcher_link link__control i-bem"
data-bem='{"link":{},"dropdown":{"id":"uniq14953563534791"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563534791" aria-expanded="false" role="button" tabindex="0">Узнать об акциях на сайте</span>
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
},
switcher: 'Узнать об акциях на сайте',
popup: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
}
}
]
Кнопка как управляющий компонент (модификатор switcher в значении button)
Используется для представления управляющего компонента блоком button.
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563533861"}}' id="uniq14953563533861" aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_size_m button_theme_islands dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown__switcher dropdown__switcher_switcher_button button__control i-bem"
data-bem='{"button":{},"dropdown":{"id":"uniq14953563533861"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563533861" aria-expanded="false" role="button" type="button"><span class="button__text">Узнать об акциях на сайте</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: 'Узнать об акциях на сайте',
popup: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
Модификатор disabled
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m dropdown_disabled i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563535231"}}' id="uniq14953563535231"
aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><span class="link link_pseudo link_theme_islands link_disabled dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m dropdown_disabled dropdown__switcher dropdown__switcher_switcher_link link__control i-bem"
data-bem='{"link":{},"dropdown":{"id":"uniq14953563535231"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563535231" aria-expanded="false" role="button" aria-disabled="true">Узнать об акциях на сайте</span>
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm',
disabled: true
},
switcher: 'Узнать об акциях на сайте',
popup: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm',
disabled: true
}
}
]
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown_disabled i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563526701"}}' id="uniq14953563526701"
aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_size_m button_theme_islands button_disabled dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown_disabled dropdown__switcher dropdown__switcher_switcher_button button__control i-bem"
data-bem='{"button":{},"dropdown":{"id":"uniq14953563526701"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563526701" aria-expanded="false" role="button" type="button" disabled="disabled"><span class="button__text">Узнать об акциях на сайте</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm',
disabled: true
},
switcher: 'Узнать об акциях на сайте',
popup: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm',
disabled: true
}
}
]
Модификатор opened
Допустимое значение: true.
Способ использования: JS.
Выставляется блоку автоматически при открытии всплывающего окна.
Модификатор theme
Допустимое значение: islands.
Способы использования: BEMJSON.
Необходимо использовать с модификатором size.
Отвечает за стилевое оформление блока и может быть задан:
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563534791"}}' id="uniq14953563534791" aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><span class="link link_pseudo link_theme_islands dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m dropdown__switcher dropdown__switcher_switcher_link link__control i-bem"
data-bem='{"link":{},"dropdown":{"id":"uniq14953563534791"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563534791" aria-expanded="false" role="button" tabindex="0">Узнать об акциях на сайте</span>
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
},
switcher: 'Узнать об акциях на сайте',
popup: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563533861"}}' id="uniq14953563533861" aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_size_m button_theme_islands dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown__switcher dropdown__switcher_switcher_button button__control i-bem"
data-bem='{"button":{},"dropdown":{"id":"uniq14953563533861"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563533861" aria-expanded="false" role="button" type="button"><span class="button__text">Узнать об акциях на сайте</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: 'Узнать об акциях на сайте',
popup: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563535701"}}' id="uniq14953563535701" aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><span class="link link_pseudo link_theme_islands link_size_m dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m dropdown__switcher dropdown__switcher_switcher_link link__control i-bem"
data-bem='{"link":{},"dropdown":{"id":"uniq14953563535701"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563535701" aria-expanded="false" role="button" tabindex="0">Узнать об акциях на сайте</span>
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
},
switcher: {
block: 'link',
mods: {
pseudo: true,
theme: 'islands',
size: 'm'
},
content: 'Узнать об акциях на сайте'
},
popup: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563526211"}}' id="uniq14953563526211" aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_togglable_check button_theme_islands button_size_m dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown__switcher dropdown__switcher_switcher_button button__control i-bem"
data-bem='{"button":{},"dropdown":{"id":"uniq14953563526211"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563526211" aria-expanded="false" role="button" type="button" aria-pressed="false"><span class="button__text">Узнать об акциях на сайте</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: {
block: 'button',
mods: {
togglable: 'check',
theme: 'islands',
size: 'm'
},
text: 'Узнать об акциях на сайте'
},
popup: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
Модификатор size
Допустимые значения для темы islands: 's', 'm', 'l', 'xl'.
Способ использования: BEMJSON.
Задает размер управляющему элементу.
Необходимо использовать с модификатором theme в значении islands.
Модификатор size может быть задан:
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563533861"}}' id="uniq14953563533861" aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_size_m button_theme_islands dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown__switcher dropdown__switcher_switcher_button button__control i-bem"
data-bem='{"button":{},"dropdown":{"id":"uniq14953563533861"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563533861" aria-expanded="false" role="button" type="button"><span class="button__text">Узнать об акциях на сайте</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: 'Узнать об акциях на сайте',
popup: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563527141"}}' id="uniq14953563527141" aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_togglable_check button_theme_islands button_size_m dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown__switcher dropdown__switcher_switcher_button button__control i-bem"
data-bem='{"button":{},"dropdown":{"id":"uniq14953563527141"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563527141" aria-expanded="false" role="button" type="button" aria-pressed="false"><span class="button__text">Узнать об акциях на сайте</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: {
block: 'button',
mods: {
togglable: 'check',
theme: 'islands',
size: 'm'
},
text: 'Узнать об акциях на сайте'
},
popup: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
Специализированные поля блока
Поле switcher
Тип: String, BEMJSON.
Определяет содержимое управляющего компонента.
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563529091"}}' id="uniq14953563529091" aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><span class="link link_pseudo link_theme_islands dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m dropdown__switcher dropdown__switcher_switcher_link link__control i-bem"
data-bem='{"link":{},"dropdown":{"id":"uniq14953563529091"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563529091" aria-expanded="false" role="button" tabindex="0">Узнать об акциях на сайте</span>
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
},
switcher: {
block: 'link',
mods: {
pseudo: true
},
content: 'Узнать об акциях на сайте'
},
popup: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563533381"}}' id="uniq14953563533381" aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_togglable_check button_size_m button_theme_islands dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown__switcher dropdown__switcher_switcher_button button__control i-bem"
data-bem='{"button":{},"dropdown":{"id":"uniq14953563533381"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563533381" aria-expanded="false" role="button" type="button" aria-pressed="false"><span class="button__text">Узнать об акциях на сайте</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: {
block: 'button',
mods: {
togglable: 'check'
},
text: 'Узнать об акциях на сайте'
},
popup: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
Поле popup
Тип: String, BEMJSON.
Определяет содержимое всплывающего окна.
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563531941"}}' id="uniq14953563531941" aria-hidden="true">Скидка 30%</div><span class="link link_pseudo link_theme_islands dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m dropdown__switcher dropdown__switcher_switcher_link link__control i-bem" data-bem='{"link":{},"dropdown":{"id":"uniq14953563531941"},"dropdown__switcher":{}}'
aria-haspopup="true" aria-controls="uniq14953563531941" aria-expanded="false" role="button" tabindex="0">Узнать об акциях на сайте</span>
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
},
switcher: 'Узнать об акциях на сайте',
popup: 'Скидка 30%'
}
[
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_xl i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953563530141"}}' id="uniq14953563530141" aria-hidden="true">
<div class="menu menu_theme_islands menu_size_xl menu_select_check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item">Первый пункт</div>
<div class="menu-item">Второй пункт</div>
</div>
</div><button class="button button_size_xl button_theme_islands dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_xl dropdown__switcher dropdown__switcher_switcher_button button__control i-bem" data-bem='{"button":{},"dropdown":{"id":"uniq14953563530141"},"dropdown__switcher":{}}'
aria-haspopup="true" aria-controls="uniq14953563530141" aria-expanded="false" role="button" type="button"><span class="button__text">Выпадающий список</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'xl'
},
switcher: 'Выпадающий список',
popup: {
block: 'menu',
mods: {
theme: 'islands',
size: 'xl',
select: 'check'
},
content: [
{
block: 'menu-item',
val: 1,
content: 'Первый пункт'
},
{
block: 'menu-item',
val: 2,
content: 'Второй пункт'
}
]
}
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'xl'
}
}
]