▾ Dropdown
The Dropdown widget (also known as a Select box) is a space-saving component that allows users to choose a single option from a list. When clicked, it expands to reveal the full list of choices, making it ideal for settings, language selection, or mode switching.
⚙️ Properties (Props)
The Dropdown configuration is defined by the DropdownWidget interface. It manages a list of strings and keeps track of the active selection.
| Property | Type | Description |
|---|---|---|
| Options | string[] | An array of labels that will appear in the expanded list. |
| Selected | number | The index of the currently active choice (starts at 0). |
| Direction | Dropdown | Controls whether the list opens Up, Down, Left, or Right. |
| Text | string | A static label shown when the list is closed (if not showing the selection). |
🛠 Behavioral Logic
The Dropdown handles its own complex UI states automatically:
- State Management: The widget handles the "Open" and "Closed" states without requiring manual logic.
- Auto-Closing: Clicking outside the dropdown area or selecting an item will automatically collapse the list.
- Symbol Support: You can use symbols (like ) within the text to indicate the expandable nature of the widget.
🎨 Styling the List
A Dropdown uses two distinct style targets in the Inspector Panel:
- Main: Styles the collapsed box (the "button" the user initially sees).
- List: Styles the expanded container, including the background, scrollbar, and the highlight color for the selected item.
⚡ Runtime API (Lua)
You can retrieve the user's choice or update the list contents dynamically via the Logic and Events system.
-- Get the text of the currently selected option
local index = dd_language:get_selected()
local language = dd_language:get_selected_str()
-- Update the list of options based on a system update
local new_options = {"Standard", "Express", "Overnight"}
dd_shipping:set_options(new_options)
-- Programmatically open the dropdown
dd_shipping:open()
If your list of options is very short (2-3 items), a Button Group or a Switch might provide a faster user experience by reducing the number of required clicks.
🚀 Next Steps
- Roller — A scrolling alternative for selecting items from a list.
- Button Matrix — Use for side-by-side selection options.
- Logic and Events — Trigger actions when a specific index is selected.