Dropdown
A collapsible list of buttons.
The dropdown is a component that functions as a list of buttons. When a dropdown button is selected a menu is shown with all the different buttons you added. Every button can have custom functions and can be visibly differentiated from each-other using colors, icons and labels.
Properties
Template Properties
| Item | Description |
|---|---|
Visible when | Allows your to add a condition for user visibility of the button using the expression editor. |
Menu Drop Orientation | Down or up Orientation of dropdown menu. Starting at the top and going down or starting above and going up. |
Alignment | Change dropdown menu to go left to right or right to left. |
Appearance Display as | Change to look of the dropdown to:
|
Color context | Change the color of the button itself. What the color looks likes in the runtime depends on chosen template settings. |
Icon position | Choose the side which side of the label the icon is shown. |
Edit menu buttons | Add remove or change the buttons shown in the dropdown menu. You can find the button specific properties here. |
Button Group Properties Orientation | Change the way a component fills the its space. Horizontal or fills up to down. Vertical fills up from left to right. |
Presentation | Changes the way buttons are grouped together. Separated or joined together. |
Alignment | Changes where the button tries to go. |
Size | Control the size of the button into: Large, Medium, small or extra small. |
The properties menu changes depending on what part of the component is selected. Make sure your context is right when you have problems finding a property.
Illustrations
In the image below you see a template editor with a label "Dropdown" and the dropdown component right below the label. When the dropdown is first added to the template it is rendered with just an icon.
You can change what the dropdown item looks like with the Appearance section in the properties pane on the right. In the Image below we have selected the display as button setting and we keep the three dots icon on the right.
This changes the dropdown to have a label and enables your own styling and context on the component. Now you also want to add buttons to the dropdown. This is done with the "Edit menu buttons" button in the properties pane. When this is selected an overlay opens with the content of the selected dropdown. The first time you will see this window:
To add buttons you grab the button from the toolbar and drop it into the yellow box. This adds a button to the menu and the button properties to the properties pane on the right. To add more buttons just drop them into the field, while dragging the button a green bar appears when hovering over a valid location for the button. With a few buttons added it will look like this:
On the right you set the functionality of the button and the set what the button looks like. The behavior settings are the same as a normal button and an explanation of these options can be found here. In the appearance group you can change the text displayed in the buttons to your own text or change it to an expression as label. Here you can also add an icon to the button and chance the color of the button text and icon.
Last updated
