4.nicegui最佳实践之“导航栏”

1. 问题：

用nicegui开发web应用，每个网页最上面都应该有个导航栏，在nicegui中却没有相应组件，应该怎么实现导航菜单呢？

  2.效果及说明

今天反过来，先看效果。

这是一个简单的页面，一个导航栏，包含了“首页”、“其它页”两个网页（注意，菜单栏和tab页是不一样的，tab页以后再说）。

3.核心概念：

今天的概念多少有点儿抽象，我尽量形象一点解释。有不理解的或者接是不对的，可以私聊讨论。

1. “导航栏”通常在网页最上方，一眼看去就能知道这个网站大体提供了哪些功能。比如上面的“首页”、“其它页”
2. “路由”在网站的世界里，每一个网页都是一个地址。这个默认地址就是根，也就是“/”；至于其他网页，就是根下的不同路径，比如“/qita”。在nicegui里，通过@ui.page("/")对函数进行装饰即可实现路由。
3. “contextmanager”上下文管理器，说白了就是用contextmanager修饰的函数，就可以像平时常用的with来进行上下文管理了。nicegui这里用上下文管理器实现网页导航栏，有一种把导航栏“套”在每个网页上的感觉。
4. “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”。有需要想深入讨论的可以线上交流。