Nicegui 3.4.0 ui.menu 的一综 案例 1

代码：

from nicegui import ui

with ui.menu() as menu:
    ui.label('设置面板').style('font-weight: bold;')
    ui.separator()

    # 功能开关（2行3列）
    with ui.grid(columns=3):
        for name in ['功能A', '功能B', '功能C', '功能D', '功能E', '功能F']:
            with ui.row().classes('items-center'):
                ui.label(name).classes('text-sm mr-2')
                ui.toggle(['关', '开'], value='关').props('dense')

    ui.separator()

    # 操作按钮 - 修正版
    with ui.grid(columns=2).classes('w-full'):
        ui.button('保存', on_click=lambda: ui.notify('保存成功'),
                 icon='save', color='positive')
        ui.button('取消', on_click=menu.close, icon='close', color='negative')

ui.label('右键菜单').context_menu = menu
ui.run()

代码：

from nicegui import ui

with ui.menu() as menu:
    # 标题
    ui.label('综合菜单').style('font-size: 16px; font-weight: bold;')
    ui.separator()

    # 图片区域
    ui.label('图片预览').classes('text-sm')
    ui.image('https://via.placeholder.com/150x80').classes('w-full rounded')

    ui.separator()

    # 输入框区域
    ui.label('用户输入').classes('text-sm')
    name_input = ui.input(placeholder='请输入姓名').classes('w-full')

    ui.label('邮箱').classes('text-sm mt-2')
    email_input = ui.input(placeholder='example@mail.com').classes('w-full')

    ui.separator()

    # 按钮区域 - 关键：on_click 必须写成 on_click=...
    with ui.grid(columns=2).classes('w-full gap-2'):
        # 正确写法：所有参数都使用关键字形式
        ui.button('提交',
                 on_click=lambda: ui.notify(f'提交: {name_input.value}, {email_input.value}'),
                 icon='send',
                 color='positive')

        ui.button('清除',
                 on_click=lambda: (setattr(name_input, 'value', ''), setattr(email_input, 'value', '')),
                 icon='clear',
                 color='warning')

        ui.button('关闭',
                 on_click=menu.close,  # 关键：必须写成 on_click=menu.close
                 icon='close',
                 color='negative')

        ui.button('帮助',
                 on_click=lambda: ui.notify('帮助信息'),
                 icon='help',
                 color='info')

# 绑定右键菜单
ui.label('右键点击此处').context_menu = menu

# 也可以通过按钮打开
ui.button('点击显示菜单', on_click=lambda e: menu.open(e))

ui.run()