|
@@ -13,4 +13,22 @@ def main_demo() -> None:
|
|
|
ui.menu_item('Reset', auto_close=False)
|
|
|
|
|
|
|
|
|
+@doc.demo('Context menus with dynamic content', '''
|
|
|
+ To show a context menu with content that changes dynamically, e.g. based on the position of the mouse,
|
|
|
+ it is recommended to re-use the same context menu instance.
|
|
|
+ This demo shows how to clear the context menu and add new items to it.
|
|
|
+''')
|
|
|
+def update_context_menu() -> None:
|
|
|
+ from nicegui import events
|
|
|
+
|
|
|
+ def update_menu(e: events.MouseEventArguments) -> None:
|
|
|
+ context_menu.clear()
|
|
|
+ with context_menu:
|
|
|
+ ui.menu_item(f'Add circle at ({e.image_x:.0f}, {e.image_y:.0f})')
|
|
|
+
|
|
|
+ source = 'https://picsum.photos/id/377/640/360'
|
|
|
+ with ui.interactive_image(source, on_mouse=update_menu, events=['contextmenu']):
|
|
|
+ context_menu = ui.context_menu()
|
|
|
+
|
|
|
+
|
|
|
doc.reference(ui.context_menu)
|