Skip to content

Latest commit

 

History

History
537 lines (450 loc) · 15.7 KB

menu.ru.md

File metadata and controls

537 lines (450 loc) · 15.7 KB
Raw

menu

Используется для создания различных типов меню.

Обзор блока

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

Модификатор Допустимые значения Способы использования Описание
mode 'radio', 'radio-check', 'check' BEMJSON Тип меню.
disabled true BEMJSON, JS Неактивное состояние.
focused true BEMJSON, JS Фокус на блоке.
theme 'islands' BEMJSON Стилевое оформление.
size 's', 'm', 'l', 'xl' BEMJSON Размер блока.

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

Поле Тип Описание
content Array Массив пунктов меню.
val String, Number, Array Выбранное значение из списка. Если блоку установлен модификатор mode в значении check, выбранные значения всегда оформляются в виде массива.

Элементы блока

Элемент Способы использования Описание
group BEMJSON Визуальная группировка пунктов меню.

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

Элемент Поле Тип Описание
group title String Заголовок группы пунктов.

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

Блок предоставляет возможность изменять внешний вид меню и управлять поведением вложенных независимых блоков – пунктов меню.

Реализация блока поддерживает клавиатурное управление: если блок menu находится в фокусе (установлен модификатор focused в значении true), ввод с клавиатуры одного из названий пунктов меню автоматически переводит фокус на данный пункт. Выбор происходит нажатием на кнопку Пробел или Ввод.

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

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

Допустимые значения: 'check, 'radio', 'radio-check'.

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

В зависимости от выбранного значения модификатора mode доступны следующие типы блока:

Простой список (модификатор mode не установлен)

Без указания модификатора mode создается простой список без возможности выбрать пункт.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm' },
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Море'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Горы'
        }
    ]
}

Меню с множественным выбором (модификатор mode в значении check)

Позволяет выбрать произвольное количество пунктов меню.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'check' },
    val : [1, 3],
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отдых в горах'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отдых на море'
        },
        {
            block : 'menu-item',
            val : 3,
            content : 'Отдых на даче'
        }
    ]
}

Меню с одиночным обязательным выбором (модификатор mode в значении radio)

Позволяет создать меню, в котором обязательно выбран ровно один пункт.

Если пункт не выбран, то по умолчанию выбирается первое значение из списка.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio' },
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отдых в горах'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отдых на море'
        }
    ]
}

Меню с одиночным необязательным выбором (модификатор mode в значении radio-check)

Модификатор mode в значении radio-check, так же как и модификатор mode в значении radio, позволяет выбрать ровно один пункт меню. Принципиальное отличие в том, что в значении radio-check есть возможность оставить меню без выбранных пунктов.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check' },
    val : 2,
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отдых в горах'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отдых на море'
        }
    ]
}

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

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

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

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

Если блоку menu устанавливается модификатор disabled, то все вложенные в него блоки menu-item также становятся неактивными.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check', disabled : true },
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отдых в горах'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отдых на море'
        }
    ]
}

Модификатор disabled в значении true может быть выставлен отдельным пунктам меню:

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check' },
    val : 2,
    content : [
        {
            block : 'menu-item',
            mods : { disabled : true },
            val : 1,
            content : 'Отдых в горах'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отдых на море'
        }
    ]
}

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

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

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

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

Отвечает за наличие фокуса на блоке.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check', focused : true },
    val : 2,
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отдых в горах'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отдых на море'
        }
    ]
}

Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.

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

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

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

Отвечает за стилевое оформление блока.

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

{
    block : 'menu',
    mods : { theme : 'islands', mode : 'check', size : 'm' },
    val : [1],
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отдых в горах'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отдых на море'
        }
    ]
}

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

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

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

Задает размер блоку.

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

s

{
    block : 'menu',
    mods : { theme : 'islands', mode : 'check', size : 's' },
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отдых в горах'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отдых на море'
        }
    ]
}

m

{
    block : 'menu',
    mods : { theme : 'islands', mode : 'check', size : 'm' },
    val : [2],
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отдых в горах'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отдых на море'
        }
    ]
}

l

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'check' },
    val : [2],
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отдых в горах'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отдых на море'
        }
    ]
}

xl

{
    block : 'menu',
    mods : { theme : 'islands', mode : 'check', size : 'xl' },
    val : [2],
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отдых в горах'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отдых на море'
        }
    ]
}

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

Поле content

Тип: Array.

Определяет перечень пунктов меню.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm' },
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отпуск на работе'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отпуск на диване'
        }
    ]
}

Поле val

Тип: String, Number, Array.

Определяет:

  • Выбранный пункт меню. В таком случае используется тип поля String или Number.
{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio' },
    val : 2,
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отпуск на работе'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отпуск на диване'
        }
    ]
}
{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'check' },
    val : [1, 2],
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отдых в горах'
        },
        {
            block : 'menu-item',
            val : 2,
            content : 'Отдых на море'
        }
    ]
}

Элементы блока

Элемент group

Служит для визуальной группировки пунктов меню. Не влияет на общую логику выбора пунктов.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio' },
    val : 2,
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Отпуск на работе'
        },
        {
            elem : 'group',
            content : [
                {
                    block : 'menu-item',
                    val : 2,
                    content : 'Отпуск в горах'
                },
                {
                    block : 'menu-item',
                    val : 3,
                    content : 'Отпуск на море'
                }
            ]
        },
        {
            block : 'menu-item',
            val : 4,
            content : 'Отпуск на диване'
        }
    ]
}

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

Специализированное поле title элемента group

Тип: String.

Определяет заголовок группы пунктов.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio' },
    val : 2,
    content : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Работа'
        },
        {
            elem : 'group',
            title : 'Активный отдых',
            content : [
                {
                    block : 'menu-item',
                    val : 2,
                    content : 'В горах'
                },
                {
                    block : 'menu-item',
                    val : 3,
                    content : 'На море'
                }
            ]
        }
    ]
}