如何用NiceGUI实现选项卡嵌套及主选项卡内新增选项卡栏

问题解答 #

• 如何使用NiceGUI实现选项卡嵌套（Tabs in Tabs）？
  在NiceGUI中实现选项卡嵌套的核心逻辑很简单：先创建主选项卡组件，再在任意一个主选项卡的内容区域内，直接实例化新的Tabs组件即可完成嵌套。

• 如何在NiceGUI的某一主选项卡中添加另一组选项卡栏？
  只需将新的Tabs组件作为目标主选项卡的子元素添加进去。NiceGUI的组件支持层级嵌套，主选项卡的内容区域可以容纳所有合法的NiceGUI组件，包括另一组完整的选项卡栏。

示例代码 #

from nicegui import ui

# 创建主选项卡容器
main_tabs = ui.tabs()

# 主选项卡1：基础内容面板
with ui.tab_panel(main_tabs, '主选项卡1'):
    ui.label('这是主选项卡1的基础展示内容')

# 主选项卡2：嵌套子选项卡的面板
with ui.tab_panel(main_tabs, '主选项卡2'):
    # 在主选项卡2内创建子选项卡容器
    sub_tabs = ui.tabs()
    
    # 子选项卡A
    with ui.tab_panel(sub_tabs, '子选项卡A'):
        ui.label('这是嵌套在主选项卡2中的子选项卡A内容')
    
    # 子选项卡B
    with ui.tab_panel(sub_tabs, '子选项卡B'):
        ui.label('这是嵌套在主选项卡2中的子选项卡B内容')

# 启动UI服务
ui.run()

代码说明 #

• 首先通过ui.tabs()创建主选项卡容器，再用ui.tab_panel为其绑定对应的内容面板。
• 在需要嵌套子选项卡的主面板中，重复调用ui.tabs()和ui.tab_panel即可生成子层级的选项卡结构。
• 所有选项卡面板都可以自由添加按钮、输入框、图表等任意NiceGUI组件，支持多层级嵌套扩展。

内容的提问来源于stack exchange，提问作者Glep Fingerman