Forum

Methodology

Toolbox

Platform

Community

desktop
touch-pad
touch-phone

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.

Open in a new window

Button as control component (switcher modifier with button value)

Use to set the button block as the control component.

Open in a new window

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.

Open in a new window
Open in a new window

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
Open in a new window
Open in a new window
  • The control component (if the switcher field contains BEMJSON code of the link or button blocks).
Open in a new window
Open in a new window

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
Open in a new window
  • The control component (if the switcher field contains BEMJSON code of the link or button blocks).
Open in a new window

Custom fields of the block

switcher field

Type: String, BEMJSON.

Specifies the content of the control component.

Open in a new window
Open in a new window

popup field

Type: String, BEMJSON.

Specifies the content of the popup.

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