5.nicegui最佳实践之“侧边栏”

1. 问题：

之前用streamlit开发过应用，侧边栏的实现相当容易，直接用“st.sidebar()”就可以实现一个侧边栏。但是在streamlit毕竟有它自己的劣势，现在使用nicegui，如何方便的实现侧边栏呢？

   2.效果及说明

先看效果，在上一节“导航栏”的基础之上额外增加了一个按钮，用于打开和关闭左侧边栏。左侧边栏包含“大屏页面”和“管理员页面”两个子菜单。

3.核心概念：

“left_drawer”提供了左侧边栏（同样还有“right_drawer”，用作右侧边栏）。left_drawer跟streamlit的sidebar很像，但是需要注意的是，sidebar默认自带了“开关”按钮，left_drawer需要自己实现一个。

“icon”在button上显示图片，而不显示文字，这样效果会更好。图标库推荐用“material-icons”。

4.示例代码(节选):

代码越来越复杂，文章里逐渐会只选取跟本节相近的内容，完整的可用代码，后面会考虑上传到公有云上，到时候再告诉大家。

1.#定义导航栏，并作为上下文，“套”在每个网页上  
2.@contextmanager  
3.def frame():  
4.    with ui.header():  
5.        with ui.row():  
6.            ##导航按钮  
7.            ui.button(icon='menu',on_click=lambda :left_drawer.toggle() ).props('flat color=white')  
8.            for section in sections:  
9.                #导航栏的每一个导航格，就是一个按钮  
10.                with ui.link(target = section.uri):  
11.                    """ 
12.                    flat:让button扁平化，没有四周的框 
13.                    """  
14.                    ui.button(section.section_name).props("flat").classes("text-blue-grey-1")  
15.    with ui.left_drawer(value = False).classes("bg-blue-grey-1") as left_drawer:  
16.        for item in left_navs:  
17.            if item.section_name is not None:  
18.  
19.                        with ui.link(target = item.uri):  
20.                            ui.button(item.section_name).props("flat").classes("text-blue-grey-10")  
21.            else:  
22.                ui.separator()  
23.    #生成器，  
24.    yield  

5.官方文档参考:

nicegui官方文档：https://nicegui.io/documentation/page_layout#reference_for_ui_left_drawer

关于联系方式，可以搜索那啥“qiaojianpan_life”加我交流。