Pārlūkot izejas kodu

Document how to update context menu items (#4696)

This PR fix #4695 by mentioning how to update context menu items. 

As it turns out, it's decently tricky. Took me a while to figure out as
well, and it's not mentioned in the docs AFAIK.

<img width="547" alt="{CE1DB11B-3F19-4AE2-BD30-B8B03A364E88}"
src="https://github.com/user-attachments/assets/e7fbdee9-630c-4fff-bbe6-ed7cb041c608"
/>

---------

Co-authored-by: Falko Schindler <falko@zauberzeug.com>
Evan Chan 2 nedēļas atpakaļ
vecāks
revīzija
ab9888157c

+ 18 - 0
website/documentation/content/context_menu_documentation.py

@@ -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)