224 lines
9.3 KiB
Markdown
224 lines
9.3 KiB
Markdown
---
|
|
components:
|
|
- rx.radix.context_menu.root
|
|
- rx.radix.context_menu.item
|
|
- rx.radix.context_menu.separator
|
|
- rx.radix.context_menu.trigger
|
|
- rx.radix.context_menu.content
|
|
- rx.radix.context_menu.sub
|
|
- rx.radix.context_menu.sub_trigger
|
|
- rx.radix.context_menu.sub_content
|
|
|
|
|
|
only_low_level:
|
|
- True
|
|
|
|
ContextMenuRoot: |
|
|
lambda **props: rx.radix.themes.context_menu.root(
|
|
rx.radix.themes.context_menu.trigger(
|
|
rx.radix.themes.text("Context Menu (right click)")
|
|
),
|
|
rx.radix.themes.context_menu.content(
|
|
rx.radix.themes.context_menu.item("Copy", shortcut="⌘ C"),
|
|
rx.radix.themes.context_menu.item("Share"),
|
|
rx.radix.themes.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"),
|
|
rx.radix.themes.context_menu.sub(
|
|
rx.radix.themes.context_menu.sub_trigger("More"),
|
|
rx.radix.themes.context_menu.sub_content(
|
|
rx.radix.themes.context_menu.item("Eradicate"),
|
|
rx.radix.themes.context_menu.item("Duplicate"),
|
|
rx.radix.themes.context_menu.item("Archive"),
|
|
),
|
|
),
|
|
),
|
|
**props
|
|
)
|
|
|
|
ContextMenuTrigger: |
|
|
lambda **props: rx.radix.themes.context_menu.root(
|
|
rx.radix.themes.context_menu.trigger(
|
|
rx.radix.themes.text("Context Menu (right click)"),
|
|
**props
|
|
),
|
|
rx.radix.themes.context_menu.content(
|
|
rx.radix.themes.context_menu.item("Copy", shortcut="⌘ C"),
|
|
rx.radix.themes.context_menu.item("Share"),
|
|
rx.radix.themes.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"),
|
|
rx.radix.themes.context_menu.sub(
|
|
rx.radix.themes.context_menu.sub_trigger("More"),
|
|
rx.radix.themes.context_menu.sub_content(
|
|
rx.radix.themes.context_menu.item("Eradicate"),
|
|
rx.radix.themes.context_menu.item("Duplicate"),
|
|
rx.radix.themes.context_menu.item("Archive"),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
|
|
ContextMenuContent: |
|
|
lambda **props: rx.radix.themes.context_menu.root(
|
|
rx.radix.themes.context_menu.trigger(
|
|
rx.radix.themes.text("Context Menu (right click)")
|
|
),
|
|
rx.radix.themes.context_menu.content(
|
|
rx.radix.themes.context_menu.item("Copy", shortcut="⌘ C"),
|
|
rx.radix.themes.context_menu.item("Share"),
|
|
rx.radix.themes.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"),
|
|
rx.radix.themes.context_menu.sub(
|
|
rx.radix.themes.context_menu.sub_trigger("More"),
|
|
rx.radix.themes.context_menu.sub_content(
|
|
rx.radix.themes.context_menu.item("Eradicate"),
|
|
rx.radix.themes.context_menu.item("Duplicate"),
|
|
rx.radix.themes.context_menu.item("Archive"),
|
|
),
|
|
),
|
|
**props
|
|
),
|
|
)
|
|
|
|
ContextMenuSubTrigger: |
|
|
lambda **props: rx.radix.themes.context_menu.root(
|
|
rx.radix.themes.context_menu.trigger(
|
|
rx.radix.themes.text("Context Menu (right click)")
|
|
),
|
|
rx.radix.themes.context_menu.content(
|
|
rx.radix.themes.context_menu.item("Copy", shortcut="⌘ C"),
|
|
rx.radix.themes.context_menu.item("Share"),
|
|
rx.radix.themes.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"),
|
|
rx.radix.themes.context_menu.sub(
|
|
rx.radix.themes.context_menu.sub_trigger("More", **props),
|
|
rx.radix.themes.context_menu.sub_content(
|
|
rx.radix.themes.context_menu.item("Eradicate"),
|
|
rx.radix.themes.context_menu.item("Duplicate"),
|
|
rx.radix.themes.context_menu.item("Archive"),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
|
|
ContextMenuSubContent: |
|
|
lambda **props: rx.radix.themes.context_menu.root(
|
|
rx.radix.themes.context_menu.trigger(
|
|
rx.radix.themes.text("Context Menu (right click)")
|
|
),
|
|
rx.radix.themes.context_menu.content(
|
|
rx.radix.themes.context_menu.item("Copy", shortcut="⌘ C"),
|
|
rx.radix.themes.context_menu.item("Share"),
|
|
rx.radix.themes.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"),
|
|
rx.radix.themes.context_menu.sub(
|
|
rx.radix.themes.context_menu.sub_trigger("More"),
|
|
rx.radix.themes.context_menu.sub_content(
|
|
rx.radix.themes.context_menu.item("Eradicate"),
|
|
rx.radix.themes.context_menu.item("Duplicate"),
|
|
rx.radix.themes.context_menu.item("Archive"),
|
|
**props
|
|
),
|
|
),
|
|
),
|
|
)
|
|
|
|
ContextMenuItem: |
|
|
lambda **props: rx.radix.themes.context_menu.root(
|
|
rx.radix.themes.context_menu.trigger(
|
|
rx.radix.themes.text("Context Menu (right click)")
|
|
),
|
|
rx.radix.themes.context_menu.content(
|
|
rx.radix.themes.context_menu.item("Copy", shortcut="⌘ C", **props),
|
|
rx.radix.themes.context_menu.item("Share", **props),
|
|
rx.radix.themes.context_menu.item("Delete", shortcut="⌘ ⌫", color="red", **props),
|
|
rx.radix.themes.context_menu.sub(
|
|
rx.radix.themes.context_menu.sub_trigger("More"),
|
|
rx.radix.themes.context_menu.sub_content(
|
|
rx.radix.themes.context_menu.item("Eradicate", **props),
|
|
rx.radix.themes.context_menu.item("Duplicate", **props),
|
|
rx.radix.themes.context_menu.item("Archive", **props),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
---
|
|
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Context Menu
|
|
|
|
A Context Menu is a popup menu that appears upon user interaction, such as a right-click or a hover.
|
|
|
|
## Basic Usage
|
|
|
|
A Context Menu is composed of a `context_menu.root`, a `context_menu.trigger` and a `context_menu.content`. The `context_menu_root` contains all the parts of a context menu. The `context_menu.trigger` is the element that the user interacts with to open the menu. It wraps the element that will open the context menu. The `context_menu.content` is the component that pops out when the context menu is open.
|
|
|
|
The `context_menu.item` contains the actual context menu items and sits under the `context_menu.content`.
|
|
|
|
The `context_menu.sub` contains all the parts of a submenu. There is a `context_menu.sub_trigger`, which is an item that opens a submenu. It must be rendered inside a `context_menu.sub` component. The `context_menu.sub_content` is the component that pops out when a submenu is open. It must also be rendered inside a `context_menu.sub` component.
|
|
|
|
The `context_menu.separator` is used to visually separate items in a context menu.
|
|
|
|
```python demo
|
|
rx.context_menu.root(
|
|
rx.context_menu.trigger(
|
|
rx.button("Right click me"),
|
|
),
|
|
rx.context_menu.content(
|
|
rx.context_menu.item("Edit", shortcut="⌘ E"),
|
|
rx.context_menu.item("Duplicate", shortcut="⌘ D"),
|
|
rx.context_menu.separator(),
|
|
rx.context_menu.item("Archive", shortcut="⌘ N"),
|
|
rx.context_menu.sub(
|
|
rx.context_menu.sub_trigger("More"),
|
|
rx.context_menu.sub_content(
|
|
rx.context_menu.item("Move to project…"),
|
|
rx.context_menu.item("Move to folder…"),
|
|
rx.context_menu.separator(),
|
|
rx.context_menu.item("Advanced options…"),
|
|
),
|
|
),
|
|
rx.context_menu.separator(),
|
|
rx.context_menu.item("Share"),
|
|
rx.context_menu.item("Add to favorites"),
|
|
rx.context_menu.separator(),
|
|
rx.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"),
|
|
),
|
|
)
|
|
```
|
|
|
|
```python demo
|
|
rx.grid(
|
|
rx.context_menu.root(
|
|
rx.context_menu.trigger(
|
|
rx.button("Right click me"),
|
|
),
|
|
rx.context_menu.content(
|
|
rx.context_menu.item("Edit", shortcut="⌘ E"),
|
|
rx.context_menu.item("Duplicate", shortcut="⌘ D"),
|
|
rx.context_menu.separator(),
|
|
rx.context_menu.item("Archive", shortcut="⌘ N"),
|
|
rx.context_menu.separator(),
|
|
rx.context_menu.item("Delete", shortcut="⌘ ⌫", color="red",
|
|
),
|
|
size="1",
|
|
),
|
|
),
|
|
rx.context_menu.root(
|
|
rx.context_menu.trigger(
|
|
rx.button("Right click me"),
|
|
),
|
|
rx.context_menu.content(
|
|
rx.context_menu.item("Edit", shortcut="⌘ E"),
|
|
rx.context_menu.item("Duplicate", shortcut="⌘ D"),
|
|
rx.context_menu.separator(),
|
|
rx.context_menu.item("Archive", shortcut="⌘ N"),
|
|
rx.context_menu.separator(),
|
|
rx.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"
|
|
),
|
|
size="2",
|
|
),
|
|
),
|
|
columns="2",
|
|
spacing="3",
|
|
)
|
|
```
|