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":"uniq14953563305241"}}' id="uniq14953563305241" 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":"uniq14953563305241"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563305241" 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":"uniq14953563304291"}}' id="uniq14953563304291" 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":"uniq14953563304291"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563304291" 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":"uniq14953563305951"}}' id="uniq14953563305951"
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":"uniq14953563305951"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563305951" 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":"uniq14953563297241"}}' id="uniq14953563297241"
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":"uniq14953563297241"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563297241" 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":"uniq14953563305241"}}' id="uniq14953563305241" 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":"uniq14953563305241"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563305241" 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":"uniq14953563304291"}}' id="uniq14953563304291" 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":"uniq14953563304291"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563304291" 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":"uniq14953563306401"}}' id="uniq14953563306401" 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":"uniq14953563306401"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563306401" 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":"uniq14953563296751"}}' id="uniq14953563296751" 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":"uniq14953563296751"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563296751" 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":"uniq14953563304291"}}' id="uniq14953563304291" 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":"uniq14953563304291"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563304291" 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":"uniq14953563297781"}}' id="uniq14953563297781" 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":"uniq14953563297781"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563297781" 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":"uniq14953563299891"}}' id="uniq14953563299891" 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":"uniq14953563299891"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563299891" 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":"uniq14953563303871"}}' id="uniq14953563303871" 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":"uniq14953563303871"},"dropdown__switcher":{}}' aria-haspopup="true" aria-controls="uniq14953563303871" 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":"uniq14953563302441"}}' id="uniq14953563302441" 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":"uniq14953563302441"},"dropdown__switcher":{}}'
aria-haspopup="true" aria-controls="uniq14953563302441" 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":"uniq14953563300901"}}' id="uniq14953563300901" 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":"uniq14953563300901"},"dropdown__switcher":{}}'
aria-haspopup="true" aria-controls="uniq14953563300901" 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'
}
}
]