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":"uniq14953581698741"}}' aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><span class="link link_pseudo link_theme_islands link__control i-bem" data-bem='{"link":{}}' 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":"uniq14953581697521"}}' aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' 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":"uniq14953581699261"}}' aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><span class="link link_pseudo link_theme_islands link_disabled link__control i-bem" data-bem='{"link":{}}' 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":"uniq14953581687091"}}' aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_size_m button_theme_islands button_disabled button__control i-bem" data-bem='{"button":{}}' 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":"uniq14953581698741"}}' aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><span class="link link_pseudo link_theme_islands link__control i-bem" data-bem='{"link":{}}' 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":"uniq14953581697521"}}' aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' 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":"uniq14953581699821"}}' aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><span class="link link_pseudo link_theme_islands link_size_m link__control i-bem" data-bem='{"link":{}}' 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":"uniq14953581685931"}}' aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' 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":"uniq14953581697521"}}' aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' 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":"uniq14953581688551"}}' aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' 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":"uniq14953581691171"}}' aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><span class="link link_pseudo link_theme_islands link__control i-bem" data-bem='{"link":{}}' 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":"uniq14953581696731"}}' aria-hidden="true">Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.</div><button class="button button_togglable_check button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' 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":"uniq14953581694391"}}' aria-hidden="true">Скидка 30%</div><span class="link link_pseudo link_theme_islands link__control i-bem" data-bem='{"link":{}}' 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":"uniq14953581692351"}}' 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 button__control i-bem" data-bem='{"button":{}}' 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'
}
}
]