- 问题:
用nicegui开发web应用,每个网页最上面都应该有个导航栏,在nicegui中却没有相应组件,应该怎么实现导航菜单呢?
2.效果及说明
今天反过来,先看效果。
这是一个简单的页面,一个导航栏,包含了“首页”、“其它页”两个网页(注意,菜单栏和tab页是不一样的,tab页以后再说)。
3.核心概念:
今天的概念多少有点儿抽象,我尽量形象一点解释。有不理解的或者接是不对的,可以私聊讨论。
- “导航栏”通常在网页最上方,一眼看去就能知道这个网站大体提供了哪些功能。比如上面的“首页”、“其它页”
- “路由”在网站的世界里,每一个网页都是一个地址。这个默认地址就是根,也就是“/”;至于其他网页,就是根下的不同路径,比如“/qita”。在nicegui里,通过@ui.page("/")对函数进行装饰即可实现路由。
- “contextmanager”上下文管理器,说白了就是用contextmanager修饰的函数,就可以像平时常用的with来进行上下文管理了。nicegui这里用上下文管理器实现网页导航栏,有一种把导航栏“套”在每个网页上的感觉。
- “dataclass”可以自定义数据类,这样用起来比元组方便得多。
4.示例代码:
from nicegui import ui
from dataclasses import dataclass,field
from contextlib import contextmanager
@dataclass
class Section:
"""
定义网页数据类型
"""
section_name :str #网页名
uri :str #网页地址
#实例化网页,指明网页名、地址
sections = [
Section("首页","/"),
Section("其它页","/qita"),
]
@ui.page("/")
def root_page():
"""
默认进入的网页,首页
"""
with frame():
ui.label("这是首页")
@ui.page("/qita")
def root_page():
"""
"""
with frame():
ui.label("这是其它页")
#定义导航栏,并作为上下文,“套”在每个网页上
@contextmanager
def frame():
with ui.header():
with ui.row():
for section in sections:
#导航栏的每一个导航格,就是一个按钮
with ui.link(target = section.uri):
"""
flat:让button扁平化,没有四周的框
"""
ui.button(section.section_name).props("flat").classes("text-blue-grey-1")
#生成器
yield
ui.run()
5.官方文档参考:
nicegui官方文档:https://nicegui.io/documentation/page_layout#reference_for_ui_header
end:关注一下吧~
关于联系方式,可以搜索“qiaojianpan_life”。有需要想深入讨论的可以线上交流。