Dropdown Button

Register on Lenra

Element of type Dropdown Button

dropdownButton

A dropdown button that can be used to open a dropdown menu when clicked.

Examples

Simple dropdown button

This creates a dropdown button that shows a button Menu Button when clicked.

{
    "type": "dropdownButton",
    "text": "Simple",
    "child": {
        "type": "button",
        "text": "Menu Button",
        "mainStyle": "secondary",
        "onPressed": {"code": "doSomething"},
    },
}

Disabled dropdown button

This creates a disabled dropdownButton, this means that it cannot be opened. The child property is still necessary even though it is impossible to show it.

{
    "type": "dropdownButton",
    "text": "Disabled dropdown",
    "disabled": true,
    "child": {
        "type": "text",
        "value": "Mandatory child",
    }
}

Sized and styled dropdown button

{
    "type": "dropdownButton",
    "text": "Sized dropdown",
    "size": "large",
    "mainStyle": "tertiary",
    "child": {
        "type": "text",
        "value": "Mandatory child",
    }
}
{
    "type": "dropdownButton",
    "text": "Dropdown button with icon",
    "icon": {
        "type": "icon", 
        "value": "yard_sharp"
    },
    "child": {
        "type": "text",
        "value": "foo",
    },
}

Properties

AttributeDescriptionTypeDetails
typeThe identifier of the componentstring ("dropdownButton")
childcomponent
textThe text of the dropdown buttonstring
disabledIf true, the dropdown button is disabledboolean
iconcomponenttypestring ("icon")
mainStyleThe style to use, the component will be changed according to the theme.string ("primary", "secondary", "tertiary")
sizeThe size to use, the component will be sized according to the value.string ("small", "medium", "large")