Sfoglia il codice sorgente

Add demo to show how to setup submenus (#3947)

I was trying to figure out if submenus would work and was almost about
to open a discussion, but then took a closer look at the example on
[Quasar](https://quasar.dev/vue-components/menu#submenus) and realized
it was just a matter of adding the right props, and setting
`auto_close=False` so that the submenus can be opened without dismissing
the menu.

Adding a basic example of how to set this up.

---------

Co-authored-by: Falko Schindler <falko@zauberzeug.com>
Alex Pilon 6 mesi fa
parent
commit
ca0718f3fc
1 ha cambiato i file con 19 aggiunte e 0 eliminazioni
  1. 19 0
      website/documentation/content/menu_documentation.py

+ 19 - 0
website/documentation/content/menu_documentation.py

@@ -27,4 +27,23 @@ def auto_close():
     ui.icon('', size='md').bind_name_from(toggle, 'value')
 
 
+@doc.demo('Menu with sub-menus', '''
+    You can use a `ui.menu` nested inside a `ui.menu_item` to created nested sub-menus.
+    The "anchor" and "self" props can be used to position the sub-menu.
+    Make sure to disable `auto-close` on the corresponding menu item to keep the menu open while navigating the sub-menu.
+''')
+def submenus():
+    with ui.button(icon='menu'):
+        with ui.menu():
+            ui.menu_item('Option 1')
+            ui.menu_item('Option 2')
+            with ui.menu_item('Option 3', auto_close=False):
+                with ui.item_section().props('side'):
+                    ui.icon('keyboard_arrow_right')
+                with ui.menu().props('anchor="top end" self="top start" auto-close'):
+                    ui.menu_item('Sub-option 1')
+                    ui.menu_item('Sub-option 2')
+                    ui.menu_item('Sub-option 3')
+
+
 doc.reference(ui.menu)