NICEGUI库，一个有点新、有点酷的PYTHON UI库（四）页眉页和一些美化

在之前的介绍中NICEGUI库，一个有点新、有点酷的PYTHON UI库（三）使用选项卡切换_Sundy�的博客-CSDN博客我将各个模块功能的切换使用了选项卡，但是只有文字的内容有点干，想要加一些颜色、图标等等，同时还有如何设置一个好用的页眉、页脚、标题。

一、页眉、页脚、标题的设计：

如果在ui中直接加入页眉、页脚、标题的话，可能内容会直接写死，因此，可以单位定义一个函数来写。比如：

def title(title):
    ui.label(title).classes('self-center text-5xl/[80%] font-bold m-5').style("font-family:HeiTi")

def header(text):
    with ui.header(elevated=True).classes('w-full bg-primary text-white mt-2'):
        ui.label(text).classes('fixed-top-right mt-2')

def footer(text):
    with ui.footer().classes('w-full bg-primary text-white mb-2'):
        ui.label(text).classes('fixed-bottom-right mb-2')

然后在启动ui的时候引用：

def ui_main():
    header('页眉')
    title('信息管理系统设置')
    with ui.grid(columns=2):
        with ui.tabs().classes('col-2 self-center').props('vertical') as tabs:
            func0 = ui.tab("func0")
            func1 = ui.tab('func1')
            func2 = ui.tab('func2')
            func3 = ui.tab('func3')
            func4 = ui.tab('func4')
        with ui.tab_panels(tabs, value=func0).classes('col self-center'):
            with ui.tab_panel(func0):
                ui.label('基础设置')
                with ui.column():
                    with ui.row():
                        ui.input(label='打印机使用的纸张ID', value='')
                    with ui.row():
                        ui.input(label='当前默认纸张ID', value='').props('disable')
            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('功能四')
    footer('页脚')

效果如图：

 

二、TAB选项卡的颜色和图标：

在NiceGUI的文档中，我可以看到一个关于TAB卡片的图标的使用，但是上面只有home和thumb_up，还有哪些图标可以使用呢？我翻遍了NICEGUI和quasar的文档，也没有专门的介绍。

原文如下：

QIcon组件允许你轻松地在其他组件或页面的任何其他区域插入图标。 Quasar开箱即用支持：Material Icons、Material Symbols、Font Awesome、Ionicons、MDI、Eva Icons、Themify Icons、Line Awesome和 Bootstrap Icons。

此外，您可以对任何图标库自行添加支持。

Quasar中有多种图标类型：基于Webfont，基于svg和基于图像。 您不必在网站/应用中仅使用一种类型。

TIP

相关页面：安装图标库和Quasar图标集.

因为我不怎么接触这些内容的，所以我挨个链接就翻看，越换越离谱。这个Material Icons点进去就是404页面，我是一头雾水。为了跳这一个坑，用了大概半天多的时间，终于找到了这个链接，上面有默认的icon名称图标链接地址，下方有所有名称，代码中只需要将icon对应上名称就可以显示图标了。在style中加上"color:颜色"就可以变换颜色。

这部分内容可以会涉及到一些html的内容，我学的也不是很深，但是class、style等等还是能看懂的，对应Quasar上的内容进行设置Quasar Framework 中文网。

代码如下：

from nicegui import ui

def title(title):
    ui.label(title).classes('self-center text-5xl/[80%] font-bold m-5').style("font-family:HeiTi")

def header(text):
    with ui.header(elevated=True).classes('w-full bg-primary text-white mt-2'):
        ui.label(text).classes('fixed-top-right mt-2')

def footer(text):
    with ui.footer().classes('w-full bg-primary text-white mb-2'):
        ui.label(text).classes('fixed-bottom-right mb-2')

def ui_main():
    header('页眉')
    title('信息管理系统设置')
    with ui.grid(columns=2).classes('w-[80%] self-center row'):
        with ui.tabs().classes('col-2 self-center').props('vertical') as tabs:
            func0 = ui.tab("func0", label='首页', icon='home').style('color:red')
            func1 = ui.tab('func1', label='功能一', icon='money').style('color:orange')
            func2 = ui.tab('func2', label='功能二', icon='devices_other').style('color:black')
            func3 = ui.tab('func3', label='功能三', icon='api').style('color:green')
            func4 = ui.tab('func4', label='功能四', icon='apps').style('color:blue')
        with ui.tab_panels(tabs, value=func0).classes('col self-center'):
            with ui.tab_panel(func0):
                ui.label('基础设置').classes('text-3xl/[80%] font-bold m-2').style("font-family:KaiTi")
                with ui.column():
                    with ui.row():
                        ui.input(label='打印机使用的纸张ID', value='').classes('text-xl/[80%] m-2').style("font-family:FangSong")
                        ui.button("保存并设置默认纸张ID")
                    with ui.row():
                        ui.input(label='当前默认纸张ID', value='').props('disable').classes('text-xl/[80%] m-2').style("font-family:FangSong")
                        ui.button("获取默认纸张ID")
            with ui.tab_panel(func1):
                ui.label('功能一').classes('text-3xl/[80%] font-bold m-2').style("font-family:KaiTi")
            with ui.tab_panel(func2):
                ui.label('功能二').classes('text-3xl/[80%] font-bold m-2').style("font-family:KaiTi")
            with ui.tab_panel(func3):
                ui.label('功能三').classes('text-3xl/[80%] font-bold m-2').style("font-family:KaiTi")
            with ui.tab_panel(func4):
                ui.label('功能四').classes('text-3xl/[80%] font-bold m-2').style("font-family:KaiTi")
    footer('页脚')

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

效果如下：

 是不是效果好看多了？下一步就是向界面中添加启动项和设置各种函数了。