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)效果如下：
是不是效果好看多了？下一步就是向界面中添加启动项和设置各种函数了。