NICEGUI库,一个有点新、有点酷的PYTHON UI库(三)使用选项卡切换

在NICEGUI库,一个有点新、有点酷的PYTHON UI库(二)样式的优化和查找_Sundy�的博客-CSDN博客的内容中,我讲到我有许多功能模块需要分开设置,所以需要分开多个页面对程序的后台进行设置。但是当程序全部启动时,切来切去的话可能会导致有些信息填写完了还要重新填,无法暂存。这样各个模块运行起来就有些麻烦。这也是我最近在设计程序的时候注意到的问题,经过思考,想到了使用选项卡切换。代码如下:

from nicegui import ui



def ui_main():
    ui.label('信息管理系统设置').classes('self-center')
    with ui.grid(columns=2).classes('w-[80%] self-center row'):
        with ui.tabs().classes('col-auto self-center').props('vertical') as tabs:
            func0 = ui.tab("首页")
            func1 = ui.tab('功能一')
            func2 = ui.tab('功能二')
            func3 = ui.tab('功能三')
            func4 = ui.tab('功能四')
        with ui.tab_panels(tabs, value=func0).classes('col self-center'):
            with ui.tab_panel(func0):
                ui.label('基础设置')
                with ui.column():
                    ui.input(label='设置文件名', placeholder='start typing', )
                    ui.input(label='打印机设置', placeholder='start typing', )
            with ui.tab_panel(func1):
                ui.label('功能一')
            with ui.tab_panel(func2):
                ui.label('功能二')
            with ui.tab_panel(func3):
                ui.label('功能三')
            with ui.tab_panel(func4):
                ui.label('功能四')

ui_main()
ui.run(reload=False, native=True)

展示效果如下:

NICEGUI库,一个有点新、有点酷的PYTHON UI库(三)使用选项卡切换_第1张图片

NICEGUI库,一个有点新、有点酷的PYTHON UI库(三)使用选项卡切换_第2张图片 

 再使用Quasar进行美化一下,这个界面就做好了,是不是和之前的看上去效果好多了?

你可能感兴趣的:(nicegui设计,python,ui,开发语言)