Skip to content

menu.en.md

Latest commit

 

History

History
539 lines (448 loc) · 12 KB

menu.en.md

File metadata and controls

539 lines (448 loc) · 12 KB

menu

Use this block for creating different types of menu.

Overview

Modifiers of the block

Modifier Acceptable values Use cases Description
mode 'radio', 'radio-check', 'check' BEMJSON The type of the menu.
disabled true BEMJSON, JS The disabled state.
focused true BEMJSON, JS The block is in focus.
theme 'islands' BEMJSON A custom design.
size 's', 'm', 'l', 'xl' BEMJSON The size of the menu. Use sizes only for menus when the theme modifier is set to islands.

Custom fields of the block

Field Type Description
content Array The array of the menu items.
val String, Number, Array The selected value from the menu. If the mode modifier with check value is applied to the block, the selected values must be declared as an array.

Elements of the block

Element Use cases Description
group BEMJSON Visual grouping of menu items. The content field is required for this element.

Custom fields of the block elements

Element Field Type Description
group title String The name of the menu items group.

Block description

Use the menu block to control the state, behavior and appearance of the menu and its nested components – the item elements.

The block supports key-pad control. If menu block is in focus (focused modifier with true value), type a menu item name on your keyboard to switch to the menu item. Use Space bar or Enter buttons to select the menu item.

Modifiers of the block

mode modifier

Acceptable values: 'check, 'radio', 'radio-check'.

Use case: BEMJSON.

The mode modifier changes the type of the menu block depending on the selected value:

Basic list (mode modifier is not specified)

If the mode modifier is not set to the block, the basic list without the possibility to select the menu item is created.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm' },
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Swimming'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Skiing'
        }
    ]
}

Multiple-choice list (mode modifier with check value)

Use this modifier to create the menu with the possibility to select any number of menu items.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'check' },
    val : [1, 3],
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        },
        {
            elem : 'item',
            val : 3,
            content : 'Downshifting'
        }
    ]
}

Mandatory single-choice list (mode modifier with radio value)

Use this modifier to create the menu that has one mandatory selected item.

If any item is not selected in BEMJSON declaration, the first menu item is selected by default.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio' },
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

Optional single-choice list (mode modifier with radio-check value)

Use this modifier to create the menu that has one mandatory selected item like in the mandatory single-choice list. The fundamental difference between these two menu types is that the menu block with the mode modifier with the radio-check value has the opportunity to leave the menu without the selected items.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check' },
    val : 2,
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

disabled modifier

Acceptable value: true.

Use cases: BEMJSON, JS.

The modifier makes the block inactive. The disabled block is visible but not available for user actions.

If menu block is disabled, all nested menu__item blocks are also disabled:

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check', disabled : true },
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

The disabled modifier with the true value could be set to a separate menu items:

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check' },
    val : 2,
    content : [
        {
            elem : 'item',
            mods : { disabled : true },
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

focused modifier

Acceptable value: true.

Use cases: BEMJSON, JS.

The modifier puts the focus on the block.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check', focused : true },
    val : 2,
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

theme modifier

Acceptable value: 'islands'.

Use case: BEMJSON.

The modifier gives the block a custom design.

The islands theme requires the size modifier.

{
    block : 'menu',
    mods : { theme : 'islands', mode : 'check', size : 'm' },
    val : [1],
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

size modifier

Acceptable values for the islands theme: 's', 'm', 'l', 'xl'.

Use case: BEMJSON.

Use the size modifier only for blocks with the islands theme.

Sets the size value for all types of menus.

s

{
    block : 'menu',
    mods : { theme : 'islands', mode : 'check', size : 's' },
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

m

{
    block : 'menu',
    mods : { theme : 'islands', mode : 'check', size : 'm' },
    val : [2],
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

l

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'check' },
    val : [2],
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

xl

{
    block : 'menu',
    mods : { theme : 'islands', mode : 'check', size : 'xl' },
    val : [2],
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

Custom fields of the block

content field

Type: Array.

Specifies the list of the menu items.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm' },
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Vacation at work'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Vacation on the couch'
        }
    ]
}

val field

Type: String, Number, Array.

Specifies:

  • The selected value from the menu. In this case the field type is String or Number.
{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio' },
    val : 2,
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Vacation at work'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Vacation on the couch'
        }
    ]
}
  • The set of selected values from the menu. This case is possible if the block has the mode modifier set to check. The field type is an Array.
{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'check' },
    val : [1, 2],
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

Elements of the block

group element

A visual grouping of the menu items that does not affect the general logic of items selection.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio' },
    val : 2,
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Work'
        },
        {
            elem : 'group',
            content : [
                {
                    elem : 'item',
                    val : 2,
                    content : 'Skiing'
                },
                {
                    elem : 'item',
                    val : 3,
                    content : 'Swimming'
                }
            ]
        },
        {
            elem : 'item',
            val : 4,
            content : 'Downshifting'
        }
    ]
}

Custom fields of the block elements

title field of group element

Type: String.

Specifies the title for a group of menu items.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio' },
    val : 2,
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Work'
        },
        {
            elem : 'group',
            title : 'Outdoor activity',
            content : [
                {
                    elem : 'item',
                    val : 2,
                    content : 'Skiing'
                },
                {
                    elem : 'item',
                    val : 3,
                    content : 'Swimming'
                }
            ]
        }
    ]
}