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
The dropdown button has different sizes and styles that can be selected as shown below.
{
"type": "dropdownButton",
"text": "Sized dropdown",
"size": "large",
"mainStyle": "tertiary",
"child": {
"type": "text",
"value": "Mandatory child",
}
}
Dropdown button with icon
If your field need some polish, you can add an icon to it easily. Just look at the material design icons to find the one you need.
{
"type": "dropdownButton",
"text": "Dropdown button with icon",
"icon": {
"type": "icon",
"value": "yard_sharp"
},
"child": {
"type": "text",
"value": "foo",
},
}
Properties
| Attribute | Description | Type |
|---|---|---|
| _type | The identifier of the component |
|
| child | Any component | Component |
| text | The text of the dropdown button | string |
| disabled | If true, the dropdown button is disabled | boolean |
| icon | The Icon to use | Icon |
| mainStyle | The style to use, the component will be changed according to the theme. | string
|
| size | The size to use, the component will be sized according to the value. | string
|