Action Menu
An action menu merges an action button with a menu for easy access to more actions.
Example
from deephaven import ui
my_action_menu_basic = ui.action_menu("Cut", "Copy", "Paste")
UI recommendations
Consider using an [action_group] to group multiple action buttons together.
Events
The on_action property is triggered whenever the value in the action group selection changes.
from deephaven import ui
@ui.component
def ui_action_menu_on_change_example():
selected_action, set_selected_action = ui.use_state("")
return [
ui.action_menu(
"Cut",
"Copy",
"Paste",
on_action=set_selected_action,
),
ui.text(f"The action you have selected is: {selected_action}"),
]
my_action_menu_on_change_example = ui_action_menu_on_change_example()
Sections
The action menu supports sections that group options. Sections can be used by wrapping groups of items in a ui.section element. Each section takes a title and key prop.
from deephaven import ui
my_action_menu_section_example = ui.action_menu(
ui.section(ui.item("Write"), ui.item("Append"), title="Addition"),
ui.section(ui.item("Erase"), ui.item("Remove"), title="Deletion"),
)
Complex items
Items within an action menu include additional content to better convey options. You can add icons, avatars, and descriptions to the children of an ui.item. When adding a description, set the slot prop to “description” to differentiate between the text elements.
from deephaven import ui
my_action_menu_complex_items_example = ui.action_menu(
ui.item(
ui.icon("github_alt"),
ui.text("Github"),
ui.text("Github Option", slot="description"),
text_value="Github",
),
ui.item(
ui.icon("azure_devops"),
ui.text("Azure"),
ui.text("Azure Option", slot="description"),
text_value="Azure",
),
)
Quiet State
The is_quiet prop makes an action menu “quiet”. This can be useful when the action menu and its corresponding styling should not distract users from surrounding content.
from deephaven import ui
my_action_menu_basic = ui.action_menu("Cut", "Copy", "Paste", is_quiet=True)
Disabled State
Through the ‘ is_disabled ‘ prop, an action menu can be disabled to prevent user interaction. This is useful when the action menu is currently unavailable, but the button should still be visible.
from deephaven import ui
my_action_menu_basic = ui.action_menu("Cut", "Copy", "Paste", is_disabled=True)
Flip
By default, the action menu automatically flips direction when space is limited. To disable this behavior, set the should_flip prop to false.
from deephaven import ui
@ui.component
def ui_action_menu_flip_examples():
return [
ui.action_menu(
"Cut", "Copy", "Paste", align="start", direction="top", should_flip=True
),
ui.action_menu(
"Cut", "Copy", "Paste", align="start", direction="top", should_flip=False
),
]
my_action_menu_flip_examples = ui_action_menu_flip_examples()
Align and direction
The align prop positions the action menu relative to the trigger, while the direction prop determines the direction in which the action menu will render.
from deephaven import ui
@ui.component
def ui_action_menu_align_direction_examples():
return [
ui.action_menu("Cut", "Copy", "Paste", align="start"),
ui.action_menu(
"Cut", "Copy", "Paste", align="start", direction="top", should_flip=False
),
ui.action_menu(
"Cut",
"Copy",
"Paste",
align="start",
direction="start",
),
ui.action_menu(
"Cut",
"Copy",
"Paste",
align="end",
direction="end",
),
]
my_action_menu_align_direction_examples = ui_action_menu_align_direction_examples()
Open
The is_open and default_open props on the action menu control whether the menu is open by default. They apply controlled and uncontrolled behavior on the menu respectively.
from deephaven import ui
@ui.component
def ui_action_menu_open_examples():
is_open, set_is_open = ui.use_state(False)
return [
ui.text(f"Controlled menu open state: {is_open}"),
ui.action_menu(
"Cut",
"Copy",
"Paste",
is_open=is_open,
on_open_change=set_is_open,
),
ui.action_menu(
"Cut",
"Copy",
"Paste",
default_open=True,
),
]
my_action_menu_open_examples = ui_action_menu_open_examples()
API Reference
ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
Returns: Element The rendered action menu element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| *children | str | int | float | bool | BaseElement | Element | The contents of the collection. | |
| is_disabled | bool | None | None | Whether the button is disabled. |
| is_quiet | bool | None | None | Whether the button should be displayed with a quiet style. |
| auto_focus | bool | None | None | Whether the element should receive focus on render. |
| disabled_keys | Iterable[str | int | float | bool] | None | None | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| align | Literal['start', 'end'] | None | 'start' | Alignment of the menu relative to the trigger. |
| direction | Literal['bottom', 'top', 'left', 'right', 'start', 'end'] | None | 'bottom' | Where the Menu opens relative to its trigger. |
| should_flip | bool | None | True | Whether the menu should automatically flip direction when space is limited. |
| close_on_select | bool | None | True | Whether the Menu closes when a selection is made. |
| trigger | Literal['press', 'longPress'] | None | 'press' | How the menu is triggered. |
| is_open | bool | None | None | Whether the overlay is open by default (controlled). |
| default_open | bool | None | None | Whether the overlay is open by default (uncontrolled). |
| key | str | None | None | A unique identifier used by React to render elements in a list. |