| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- from nicegui import ui
- from . import doc
- @doc.demo(ui.menu)
- def main_demo() -> None:
- with ui.row().classes('w-full items-center'):
- result = ui.label().classes('mr-auto')
- with ui.button(icon='menu'):
- with ui.menu() as menu:
- ui.menu_item('Menu item 1', lambda: result.set_text('Selected item 1'))
- ui.menu_item('Menu item 2', lambda: result.set_text('Selected item 2'))
- ui.menu_item('Menu item 3 (keep open)',
- lambda: result.set_text('Selected item 3'), auto_close=False)
- ui.separator()
- ui.menu_item('Close', menu.close)
- @doc.demo('Client-side auto-close', '''
- Use the `auto-close` prop to automatically close the menu on any click event directly without a server round-trip.
- ''')
- def auto_close():
- with ui.button(icon='menu'):
- with ui.menu().props('auto-close'):
- toggle = ui.toggle(['fastfood', 'cake', 'icecream'], value='fastfood')
- 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, title='Reference for ui.menu')
- doc.reference(ui.menu_item, title='Reference for ui.menu_item')
|
