DropDown
The DropDown widget expands a list of options when pressed so you can pick one. Use it for choices such as language or category.
Example file: 07_Work_with_Widgets/dropdown_objet.lfp
Definition and role
The DropDown widget draws a combo area that shows the current value, and pressing it reveals the list of items. Selecting an item runs onChanged. Set how the list expands — a combo list or a bottom sheet — along with its colors and size.
- Category: Contents
- Default expand mode: combo (
combo) - Default width:
200
Features
| Feature | Description |
|---|---|
| Item selection | Selecting an item from the list changes the current value to that item's value. |
| Expand mode | Choose between a combo list (combo) and a bottom sheet (sheet) with comboType. |
| Selection change detection | When the selection changes, onChanged runs and passes the selected value. |
| Appearance | Adjust the width, height, corner radius, maximum visible item count, and a range of colors. |
How to use
- Open the Contents category in the left widget palette.
- Drag and drop the DropDown item onto the canvas.
- In the property panel, set the selectable items (
items) and the initial value (value). - Attach the action you want to run on a selection change to
onChanged. - Adjust the expand mode (
comboType), colors, and size if needed.
Properties
| Property | Description | Default | Value / type |
|---|---|---|---|
comboType | Expand mode | combo | combo, sheet |
sheetTitle | Sheet title used in bottom sheet mode | Empty string | String |
items | List of selectable items (each item has a title, a subtitle, and a value) | None | List |
value | Initial selected value (one of the item values) | None | String |
width | Combo width | 200 | Number (0 or greater) |
comboHeight | Combo height | 26 | Number (0 or greater) |
itemHeight | Height of each item | 24 | Number (0 or greater) |
boxRadius | Corner radius | 4 | Number (0 or greater) |
maxShowItem | Maximum number of items shown at once | 10 | Integer (0 or greater) |
comboboxBgColor | Combo background color | #000000 | Color |
comboboxBorderColor | Combo border color | #666666 | Color |
titleColor | Text color of the selected value | #FFFFFF | Color |
subtitleColor | Subtitle color of the selected value | #A5A5A5 | Color |
itemTitleColor | Title color of list items | #A5A5A5 | Color |
itemSubtitleColor | Subtitle color of list items | #666666 | Color |
unsetTextColor | Color of the unset indicator | #F44336 | Color |
arrowColor | Arrow color | #FFFFFF | Color |
itemBgColor | List background color | #333333 | Color |
itemBorderColor | List border color | #666666 | Color |
selectedItemColor | Background color of the selected item | #151515 | Color |
itemHoverColor | Item hover color | #623BEB | Color |
enable | Whether the widget is usable | On (true) | True / false |
Notes and tips
Omit an item's value in items and its title becomes the value. Set value to one of the item values to line up the initial selection.
To show the list as a sheet that slides up from the bottom of the screen on mobile, set comboType to sheet and give sheetTitle a title.
Learn more
For the full set of Widget Controls (Property, Method, Event) that let you drive this widget from a script, visit DropDown Widget Control.