Dropdown

A Dropdown is a widget that allows the user to select one option from a list of options. When the user clicks on the dropdown, it expands to show the list of options, and the user can click on an option to select it. The selected option is then displayed in the dropdown.

Examples

Say hi in…

In this example, we create a dropdown that allows the user to select a language, and then displays a greeting in that language when the user selects an option.

import gooeypie as gp

def say_hi(event):
    """Update the greeting label based on the selected language."""
    if language_dd.selected == "English":
        greeting_lbl.text = "Hello!"
    elif language_dd.selected == "Spanish":
        greeting_lbl.text = "Hola!"
    elif language_dd.selected == "Japanese":
        greeting_lbl.text = "Konnichiwa!"
    elif language_dd.selected == "Chinese":
        greeting_lbl.text = "Nǐ hǎo!"

app = gp.GooeyPieApp("Say Hi")

# Create label text and dropdown
say_hi_lbl = gp.Label("Say hi in:")
language_dd = gp.Dropdown(["English", "Spanish", "Japanese", "Chinese"])

# Create greeting label (initially empty)
greeting_lbl = gp.Label("")
greeting_lbl.style.font_size = 20
greeting_lbl.style.font_weight = "bold"
greeting_lbl.style.text_color = "blue", "skyblue"

# Add widgets to app
app.add(say_hi_lbl, 1, 1)
app.add(language_dd, 2, 1)
app.add(greeting_lbl, 1, 2, column_span=2)

# Call say_hi() when the dropdown selection changes
language_dd.on_change(say_hi)

app.run()

Creating a Dropdown widget

my_dropdown = gp.Dropdown(options)

Parameters

options (list of strings): The list of options for the dropdown.

Properties

Name	Type	Description
`.selected`	string	Gets or sets the currently selected option in the dropdown. Setting this property will change the selected option to the one with the specified value.
`.selected_index`	integer	Gets or sets the index of the currently selected option in the dropdown (starting from 0). Setting this property will change the selected option to the one at the specified index.
`.options`	list of strings	Gets or sets the list of options for the dropdown. Setting this property will update the options in the dropdown to match the new list.
`.width`	integer	Gets or sets the width of the dropdown in pixels.
`.height`	integer	Gets or sets the height of the dropdown in pixels.
`.disabled`	boolean	Gets or sets whether the dropdown is disabled. When disabled is set to `True`, the dropdown does not respond to click events.

Methods

This widget has no unique methods.

Events

This widget supports the following events as well as the standard events listed below.

Name	Description
`.on_change(event_function)`	The function to call when the selected option in the dropdown changes. This event is triggered whenever the user selects a different option from the dropdown or when the selected option is changed programmatically.

Standard events

.on_click
.on_double_click
.on_right_click
.on_middle_click
.on_mouse_down
.on_mouse_up
.on_mouse_enter
.on_mouse_leave
.on_focus_gained
.on_focus_lost

Styles

How to specify colors

Colors can be specified as either a hex code (e.g. "#FF0000"), a CSS color name, or "transparent".
When specifying a color for a style, you can provide either a single color or two colors separated by a comma. If you provide two colors, the first will be used for light mode and the second for dark mode. For example, my_widget.text_color = "steelblue", "skyblue" would specify steelblue for light mode and sky blue for dark mode.

Name	Description	Default
`.style.bg_color`	The background color of the dropdown.
`.style.border_color`	The color of the border of the dropdown. Will not be visible unless `border_width` is greater than 0.
`.style.border_width`	The width of the border of the dropdown.	`2`
`.style.button_color`	The color of the button of the dropdown.
`.style.button_hover_color`	The color of the button of the dropdown when the mouse hovers over it.
`.style.corner_radius`	The radius of the corners of the dropdown.	`6`
`.style.dropdown_hover_color`	The color of the dropdown options when the mouse hovers over them.
`.style.text_color`	The color of the text of the dropdown.
`.style.text_disabled_color`	The color of the text of the dropdown when it is disabled.
`.style.font_name`	The font of the text of the button. Either an installed font or a generic font name: `"serif"`, `"sans-serif"`, `"monospace"` or `"system"`	`"system"`
`.style.font_size`	The size of the text of the button.	`12`
`.style.font_weight`	The weight of the text of the button. Either `"normal"` or `"bold"`.	`"normal"`
`.style.font_style`	The style of the text of the button. Either `"normal"` or `"italic"`.	`"normal"`