Форум

Методология

Инструментарий

Платформа

Сообщество

desktop
touch-pad
touch-phone

dropdown

Используется для реализации составного блока, который объединяет всплывающий блок (popup) и вызывающий его управляющий компонент (например, кнопку или ссылку).

Обзор блока

Модификаторы блока

Модификатор Допустимые значения Способы использования Описание
switcher 'link', 'button' BEMJSON Тип управляющего компонента. Модификатор является обязательным.
disabled true BEMJSON, JS Неактивное состояние.
opened true JS Отображение всплывающего блока на странице.
theme 'islands' BEMJSON Стилевое оформление.
size 's', 'm', 'l', 'xl' BEMJSON Размер управляющего компонента.

Специализированные поля блока

Поле Тип Описание
switcher String, BEMJSON Содержимое управляющего компонента.
popup String, BEMJSON Содержимое всплывающего окна.

Описание блока

Модификаторы блока

Модификатор switcher

Допустимые значения: link, button.

Способ использования: BEMJSON.

Модификатор switcher отвечает за то, какой блок будет использоваться в качестве управляющего компонента:

Ссылка как управляющий компонент (модификатор switcher в значении link)

Используется для представления управляющего компонента блоком link.

Нажатие на ссылку вызывает всплывающий блок. Переход по ссылке не осуществляется.

Open in a new window

Кнопка как управляющий компонент (модификатор switcher в значении button)

Используется для представления управляющего компонента блоком button.

Open in a new window

Модификатор disabled

Допустимое значение: true.

Способы использования: BEMJSON, JS.

Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.

Open in a new window
Open in a new window

Модификатор opened

Допустимое значение: true.

Способ использования: JS.

Выставляется блоку автоматически при открытии всплывающего окна.

Модификатор theme

Допустимое значение: islands.

Способы использования: BEMJSON.

Необходимо использовать с модификатором size.

Отвечает за стилевое оформление блока и может быть задан:

  • блоку dropdown в целом
Open in a new window
Open in a new window
  • управляющему элементу, если в поле switcher пробрасывается BEMJSON блока link или button.
Open in a new window
Open in a new window

Модификатор size

Допустимые значения для темы islands: 's', 'm', 'l', 'xl'.

Способ использования: BEMJSON.

Задает размер управляющему элементу.

Необходимо использовать с модификатором theme в значении islands.

Модификатор size может быть задан:

  • блоку dropdown в целом
Open in a new window
  • управляющему элементу, если в поле switcher пробрасывается BEMJSON блока link или button.
Open in a new window

Специализированные поля блока

Поле switcher

Тип: String, BEMJSON.

Определяет содержимое управляющего компонента.

Open in a new window
Open in a new window

Поле popup

Тип: String, BEMJSON.

Определяет содержимое всплывающего окна.

Open in a new window
Open in a new window

Block dropdown

Instance methods:

getPopup():popup
description
Returns popup
getSwitcher():i-bem-dom
description
Returns switcher
_onSwitcherClick(e)protected
description
On BEM click event handler
parameters
e
events:Event