Skip to content

dropdown.ru.md

Latest commit

 

History

History
291 lines (223 loc) · 10.6 KB

dropdown.ru.md

File metadata and controls

291 lines (223 loc) · 10.6 KB
Raw

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.

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

{
    block : 'dropdown',
    mods : { switcher : 'link', theme : 'islands', size : 'm' },
    switcher : 'Узнать об акциях на сайте',
    popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}

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

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

{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm' },
    switcher : 'Узнать об акциях на сайте',
    popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}

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

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

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

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

{
    block : 'dropdown',
    mods : { switcher : 'link', theme : 'islands', size : 'm', disabled : true },
    switcher : 'Узнать об акциях на сайте',
    popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm', disabled : true },
    switcher : 'Узнать об акциях на сайте',
    popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}

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

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

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

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

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

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

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

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

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

  • блоку dropdown в целом
{
    block : 'dropdown',
    mods : { switcher : 'link', theme : 'islands', size : 'm' },
    switcher : 'Узнать об акциях на сайте',
    popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm' },
    switcher : 'Узнать об акциях на сайте',
    popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
  • управляющему элементу, если в поле switcher пробрасывается BEMJSON блока link или button.
{
    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 : 'button', theme : 'islands', size : 'm' },
    switcher : {
        block : 'button',
        mods : { togglable : 'check', theme : 'islands', size : 'm', },
        text : 'Узнать об акциях на сайте'
    },
    popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}

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

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

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

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

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

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

  • блоку dropdown в целом
{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm' },
    switcher : 'Узнать об акциях на сайте',
    popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
  • управляющему элементу, если в поле switcher пробрасывается BEMJSON блока link или button.
{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm' },
    switcher : {
        block : 'button',
        mods : { togglable : 'check', theme : 'islands', size : 'm' },
        text : 'Узнать об акциях на сайте'
    },
    popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}

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

Поле switcher

Тип: String, BEMJSON.

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

{
    block : 'dropdown',
    mods : { switcher : 'link', theme : 'islands', size : 'm' },
    switcher : {
        block : 'link',
        mods : { pseudo : true },
        content : 'Узнать об акциях на сайте'
    },
    popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}
{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm' },
    switcher : {
        block : 'button',
        mods : { togglable : 'check' },
        text : 'Узнать об акциях на сайте'
    },
    popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
}

Поле popup

Тип: String, BEMJSON.

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

{
    block : 'dropdown',
    mods : { switcher : 'link', theme : 'islands', size : 'm' },
    switcher : 'Узнать об акциях на сайте',
    popup : 'Скидка 30%'
}
{
    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 : 'Второй пункт'
            }
        ]
    }
}