Skip to content

Latest commit

 

History

History
296 lines (224 loc) · 7.7 KB

dropdown.en.md

File metadata and controls

296 lines (224 loc) · 7.7 KB
Raw

dropdown

A composite block that consists of a control component (for example, a button or a link) that triggers a popup.

Overview

Modifiers of the block

Modifier Acceptable values Use cases Description
switcher 'link', 'button' BEMJSON The type of the control component. A modifier is required.
disabled true BEMJSON, JS The disabled state.
opened true JS Displaying the popup on a page.
theme 'islands' BEMJSON A custom design.
size 's', 'm', 'l', 'xl' BEMJSON The size of the control component. Use sizes only when the theme modifier is set to islands.

Custom fields of the block

Field Type description
switcher String, BEMJSON Content of the control component.
popup String, BEMJSON Content of the popup.

Block description

Use the dropdown block to create different dropdown types, control their state, behavior and appearance on a page.

Modifiers of the block

switcher modifier

Acceptable values: link, button.

Use case: BEMJSON.

The switcher modifier specifies the type of the control component:

Link as control component (switcher modifier with link value)

Use to set the link block as the control component.

Clicking on the link triggers the popup block.

{
    block : 'dropdown',
    mods : { switcher : 'link', theme : 'islands', size : 'm' },
    switcher : 'New sales',
    popup : '30% discount for a new collection. Enter a promotional code to start shopping.'
}

Button as control component (switcher modifier with button value)

Use to set the button block as the control component.

{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm' },
    switcher : 'New sales',
    popup : '30% discount for a new collection. Enter a promotional code to start shopping.'
}

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.

{
    block : 'dropdown',
    mods : { switcher : 'link', theme : 'islands', size : 'm', disabled : true },
    switcher : 'New sales',
    popup : '30% discount for a new collection. Enter a promotional code to start shopping.'
}
{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm', disabled : true },
    switcher : 'New sales',
    popup : '30% discount for a new collection. Enter a promotional code to start shopping.'
}

opened modifier

Acceptable value: true.

Use case: JS.

The modifier is applied to the block automatically when the popup opens.

theme modifier

Acceptable value: islands.

Use cases: BEMJSON.

The modifier gives the block a custom design.

The islands theme requires the size modifier.

The modifier can be applied to:

  • The whole dropdown block
{
    block : 'dropdown',
    mods : { switcher : 'link', theme : 'islands', size : 'm' },
    switcher : 'New sales',
    popup : '30% discount for a new collection. Enter a promotional code to start shopping.'
}
{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm' },
    switcher : 'New sales',
    popup : '30% discount for a new collection. Enter a promotional code to start shopping.'
}
  • The control component (if the switcher field contains BEMJSON code of the link or button blocks).
{
    block : 'dropdown',
    mods : { switcher : 'link', theme : 'islands', size : 'm' },
    switcher : {
        block : 'link',
        mods : { pseudo : true, theme : 'islands', size : 'm' },
        content : 'New sales'
    },
    popup : '30% discount for a new collection. Enter a promotional code to start shopping.'
}
{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm' },
    switcher : {
        block : 'button',
        mods : { togglable : 'check', theme : 'islands', size : 'm', },
        text : 'New sales'
    },
    popup : '30% discount for a new collection. Enter a promotional code to start shopping.'
}

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.

The modifier can be applied to:

  • The whole dropdown block
{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm' },
    switcher : 'New sales',
    popup : '30% discount for a new collection. Enter a promotional code to start shopping.'
}
  • The control component (if the switcher field contains BEMJSON code of the link or button blocks).
{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm' },
    switcher : {
        block : 'button',
        mods : { togglable : 'check', theme : 'islands', size : 'm' },
        text : 'New sales'
    },
    popup : '30% discount for a new collection. Enter a promotional code to start shopping.'
}

Custom fields of the block

switcher field

Type: String, BEMJSON.

Specifies the content of the control component.

{
    block : 'dropdown',
    mods : { switcher : 'link', theme : 'islands', size : 'm' },
    switcher : {
        block : 'link',
        mods : { pseudo : true },
        content : 'New sales'
    },
    popup : '30% discount for a new collection. Enter a promotional code to start shopping.'
}
{
    block : 'dropdown',
    mods : { switcher : 'button', theme : 'islands', size : 'm' },
    switcher : {
        block : 'button',
        mods : { togglable : 'check' },
        text : 'New sales'
    },
    popup : '30% discount for a new collection. Enter a promotional code to start shopping.'
}

popup field

Type: String, BEMJSON.

Specifies the content of the popup.

{
    block : 'dropdown',
    mods : { switcher : 'link', theme : 'islands', size : 'm' },
    switcher : 'New sales',
    popup : 'Скидка 30%'
}
{
    block : 'dropdown',
    mods : {
        switcher : 'button',
        theme : 'islands',
        size : 'xl'
    },
    switcher : 'Dropdown list',
    popup : {
        block : 'menu',
        mods : {
            theme : 'islands',
            size : 'xl',
            select : 'check'
        },
        content : [
            {
                block : 'menu-item',
                val : 1,
                content : 'First item'
            },
            {
                block : 'menu-item',
                val : 2,
                content : 'Second item'
            }
        ]
    }
}