NiceGUI使用指南
NiceGui 是一个简单易用的基于Python的Web-UI框架，其目的是使在Python中开发前端应用程序变得容易。
它的Web相关服务/路由等是基于Python FastAPI 框架构建的。而 UI 元素基于 Vue 和 Quasar。NiceGui 带有许多现成的元素。它甚至允许不同元素之间的值绑定。可以轻松显示各种图表。
主要功能：
- 预加载了随时可用的 GUI 元素，如按钮、标签、复选框、滑块、开关等
- 表情符号图标、SVG 和 base64 支持
- 提供简单的数据绑定
- 用于刷新数据的内置定时器
- 能够渲染 3D 场景，绘制图表
- 可以轻松显示图像和视频
- 它使自定义页面和布局变得容易，并且内置了对 Tailwind CSS 的支持
官方指南：https://nicegui.io/documentation #很全，很好，有范例 https://nicegui.io/#demos（这一点比Streamlit强）
入门范例
这里有个B站视频教学：【我用python做的表格与你的有些不一样】
视频中还介绍了如何给df中的元素增加强调色彩/可点击的属性
B站视频教学：
【python的nicegui界面库终于有界面设计器了】
【nicegui指哪打哪，实现组件乾坤大挪移】
【不一样的角度，教你python写web需要的前端知识】
【轻松提升用户体验：Nicegui做web界面卡顿问题一网打尽】
【python界面库nicegui，输入框就可以设置这么多功能】
其它文章：
https://zhuanlan.zhihu.com/p/658513176
https://blog.csdn.net/m0_62283350/article/details/146956649
https://blog.csdn.net/z099164/article/details/138211905
元素应用
Text Elements（文本组件）
文本组件是 GUI 里最基础的内容，比如 标题、段落、代码框 等。
Controls（控制组件）
UI 交互怎么能少了按钮、输入框、滑块这些小玩意呢？
Audiovisual Elements（音视频组件）
NiceGUI 也支持 播放音频、视频、图片等多媒体内容，可以用来做 数据可视化，甚至可以做个 Web 版的音乐播放器！
Data Elements（数据展示组件）
有时候我们需要展示数据，比如表格、进度条、统计信息等。
Binding Properties（数据绑定）
NiceGUI 让 前端界面和 Python 代码的数据同步 变得异常简单，不需要手动监听事件，只要 绑定属性，前端改了，Python 变量自动更新！
Action & Events（用户交互）
NiceGUI 支持各种事件监听，如 点击、悬停、拖拽、键盘输入 等。
Styling & Appearance（界面美化）
默认的 NiceGUI 界面已经很清爽，但如果想要 更个性化的设计，可以调整 颜色、字体、样式！
Pages & Routing（多页面管理）
如果想要 多个页面，NiceGUI 也支持 路由功能！
Configuration & Deployment（配置与部署）
NiceGUI 内置了 FastAPI 服务器，可以很方便地 部署到云端 或 打包成独立应用！
Page Layout（页面布局）
创建header
# 创建顶部导航栏 - 必须是顶级元素
header = ui.header().classes(
'bg-blue-600 text-white shadow-lg p-4 flex items-center justify-between fixed top-0 left-0 right-0 z-50')
with header:
ui.label("量化管理系统").classes("text-2xl font-bold")
with ui.row().classes("gap-4"):
ui.button("首页", icon="home")
ui.button("通知", icon="notifications", color="yellow-500")
ui.button("设置", icon="settings", color="gray-500")
with ui.button(icon="person"):
ui.label("管理员")
左右布局 + 侧边栏
一个好看的界面离不开 布局，NiceGUI 里有 栅格系统、侧边栏、分区容器 这些布局工具。
Sidebar侧边栏
# 创建侧边栏 - 必须是顶级元素
sidebar = ui.left_drawer(value=True, fixed=False, bordered=True) \
.classes('bg-white shadow-lg mt-14') \
.props('width=250 breakpoint=500') \
.classes('lt-md:hidden')
with sidebar:
ui.label("MENU").classes("text-xl font-bold p-4 border-b")
with ui.column().classes("p-2 gap-1"):
ui.button("版块热点分析", icon="dashboard").props("flat").classes("justify-start")
ui.button("技术分析", icon="people").props("flat").classes("justify-start")
ui.button("持仓管理", icon="shopping_cart").props("flat").classes("justify-start")
ui.button("风险管理", icon="bar_chart").props("flat").classes("justify-start")
ui.button("历史分析", icon="settings").props("flat").classes("justify-start")
with ui.column().classes("absolute bottom-0 left-0 w-full p-4 border-t"):
ui.button("退出系统", icon="logout", color="red").props("flat").classes("w-full")
行列元素
from nicegui import ui
with ui.row():
ui.button('左边的按钮')
ui.button('右边的按钮')
with ui.column():
ui.label('上面的文字')
ui.label('下面的文字')
with ui.tabs().classes('w-full') as tabs:
one = ui.tab('Tab1')
two = ui.tab('Tab2')
with ui.tab_panels(tabs, value=two).classes('w-full'):
with ui.tab_panel(one):
ui.label('我是Tab1')
with ui.tab_panel(two):
ui.label('我是Tab2')
ui.run()
主内容区域容器
# 创建主内容区域容器
main_content = ui.column().classes('pt-14 pb-16 h-full overflow-auto')
with main_content:
# 标签页组件
with ui.tabs().classes('w-full bg-white rounded-lg shadow mb-4') as tabs:
dashboard = ui.tab('版块热点分析', icon='dashboard')
users = ui.tab('技术分析', icon='people')
orders = ui.tab('持仓管理', icon='shopping_cart')
reports = ui.tab('分析报表', icon='analytics')
添加图形
from nicegui import ui
import plotly.express as px
import pandas as pd
import random
data = pd.DataFrame({'x': range(10), 'y': [random.randint(0, 10) for _ in range(10)]})
def update_chart():
data['y'] = [random.randint(0, 10) for _ in range(10)]
fig = px.line(data, x='x', y='y')
chart.update(fig)
with ui.card():
chart = ui.plotly(px.line(data, x='x', y='y'))
ui.button('更新图表', on_click=update_chart)
ui.run()
连接dataframe
在 NiceGUI 中连接和展示 pandas.DataFrame 的数据，可以通过多种方式实现，例如使用 ui.table 或第三方组件如 nicegui-tabulator 和 aggrid。
以下是几种常见的实现方式和示例代码：
1. 使用 ui.table 展示 DataFrame 数据
ui.table 是 NiceGUI 提供的一个简单表格组件，可以直接绑定 DataFrame 数据。
import pandas as pd
from nicegui import ui
import ng_init
#如果觉得官方的df的显示太单调，可以先import ng_init，再用下句，秒变小清新
ng_init.styles()
# 创建一个示例 DataFrame
df = pd.DataFrame({
'Name': ['Alice', 'Bob', 'Charlie'],
'Age': [25, 30, 35],
'City': ['New York', 'Los Angeles', 'Chicago']
})
#方法一
# 将 DataFrame 转换为字典格式，方便 ui.table 使用
#table_data = df.to_dict(orient='records')
# 创建表格
#ui.table(columns=[{'name': col, 'label': col} for col in df.columns], rows=table_data)
#方法二
#直接导入df，并设置分页数3，这对长表很重要
ui.table.from_pandas(df, pagination = 3)
ui.run()
如果df中有不想显示的列，可以用下面的代码：
table._props["visible-columns"] = df.columns.tolist()[:-1]
2. 使用 nicegui-tabulator 展示 DataFrame 数据
nicegui-tabulator 是一个功能更强大的表格组件，支持更多高级功能，如排序、筛选和分页。
from nicegui_tabulator import tabulator
from nicegui import ui
# 创建一个示例 DataFrame
df = pd.DataFrame({
'Name': ['Alice', 'Bob', 'Charlie'],
'Age': [25, 30, 35],
'City': ['New York', 'Los Angeles', 'Chicago']
})
# 将 DataFrame 转换为字典格式
table_data = df.to_dict(orient='records')
# 配置表格
table_config = {
"height": 205,
"layout": "fitDataFill",
"pagination": "local",
"paginationSize": 10,
"movableColumns": True,
"resizableRows": True,
"data": table_data,
"columns": [
{"title": "Name", "field": "Name", "width": 150, "headerFilter": "input"},
{"title": "Age", "field": "Age", "hozAlign": "left", "formatter": "progress"},
{"title": "City", "field": "City"},
],
}
# 创建表格
tabulator(table_config).on_event("rowClick", lambda e: ui.notify(e))
ui.run()
3. 使用 aggrid 展示 DataFrame 数据
aggrid 是另一个强大的表格组件，支持丰富的功能，如行选择、过滤和样式化。
import pandas as pd
from nicegui import ui
# 创建一个示例 DataFrame
df = pd.DataFrame({
'Name': ['Alice', 'Bob', 'Charlie'],
'Age': [25, 30, 35],
'City': ['New York', 'Los Angeles', 'Chicago']
})
# 将 DataFrame 转换为字典格式
table_data = df.to_dict(orient='records')
# 配置 aggrid
columns_agrid = [
{"headerName": "Name", "field": "Name", "maxWidth": 120},
{"headerName": "Age", "field": "Age", "filter": "agNumberColumnFilter", "floatingFilter": True},
{"headerName": "City", "field": "City"},
]
# 创建 aggrid
grid = ui.aggrid({
"defaultColDef": {"flex": 1},
"columnDefs": columns_agrid,
"rowData": table_data,
"rowSelection": "multiple",
"pagination": True,
"paginationPageSize": 10,
"suppressRowClickSelection": True,
"paginationPageSizeSelector": [3, 6, 8, 10],
}).classes("h-full")
# 添加事件监听
grid.on("cellClicked", lambda event: ui.notify(f'Cell value: {event.args["value"]}'))
ui.run()
集成第三方API
NiceGUI允许你轻松集成第三方API，例如获取实时天气数据并显示在你的Web应用中：
from nicegui import ui
import requests
def fetch_weather():
response = requests.get('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London')
weather = response.json()
ui.notify(f"当前温度: {weather['current']['temp_c']}°C")
with ui.card():
ui.label('点击按钮获取当前天气')
ui.button('获取天气', on_click=fetch_weather)
ui.run()
总结
如果需要简单展示数据，可以使用 ui.table。
如果需要更强大的功能（如排序、筛选、分页），可以使用 nicegui-tabulator。
如果需要更高级的表格功能（如行选择、过滤、样式化），可以使用 aggrid。
根据你的需求选择合适的组件即可。
其它工具
quasar文档 可以用来研究具体的html设置
Nicegui默认使用QUASAR界面框架，以fastAPI作为web后台脚本
https://quasar.dev/vue-components/avatar
https://www.quasarchs.com/
中文论坛：https://forum.quasarchs.com/
https://codepen.io/pen?&editors=101
nicegui_toolkit
from nicegui_toolkit import inject_layout_tool
# 确保在创建任何 ui 组件之前调用
inject_layout_tool()
Live server (VS Code中安装），可使html页面实时刷新
sika图标库
目前开源项目【sika-design：http://quasar.sikacode.com/expend/icon-view】已经集成了六大流行图标库，支持智能筛选，一件复制，一件切换颜色等各种功能～一入 sika 深似海，从此FQ是路人
支持图标库
Material Icons
Ionicons_v4
MDI
Eva Icons
Themify Icons
Bootstrap Icons
pybi-next
https://gitee.com/carson_add/pybi-next
https://gitee.com/carson_add/pybi-gallery
pybi 是一个使用 Python 直观简洁声明语句的BI可视化报告库。使用 pybi，你可以创建灵活强大的 BI 式交互报告。生成的报告只有一个 html 文件，用户只需要使用浏览器打开就能看到所有的交互效果，无须 Python 环境
浙公网安备 33010602011771号