Python Web UI: NiceGUI

[hhstore]

related:

• ✅ xxx
• ✅ xxx
• ✅ xxx
• ✅ xxx

[hhstore]

Python Web UI 方案: NiceGUI

官方资源:

• ✅️ https://nicegui.io/
• ✅️ https://www.reddit.com/r/nicegui/

依赖项目:

• https://nicegui.io/#features
• generic Vue to Python bridge
• dynamic GUI through Quasar
• content is served with FastAPI
• Python 3.7+

FastAPI

• ✅️ https://fastapi.tiangolo.com/
• ✅️ python 最流行的 web API 框架.

Vue.js 3.x:

• ✅️ https://vuejs.org/

Vue UI 框架: Quasar

• ✅️ https://quasar.dev/

CSS 样式: Tailwind

• ✅️ https://tailwindcss.com/

[hhstore]

NiceGUI 踩坑系列:

页面路由:

• ✅️ https://fastapi.tiangolo.com/tutorial/bigger-applications/?h=apirouter#apirouter

页面跳转方式:

ui.open()

• ✅️ https://nicegui.io/documentation#open

ui.link()

• ✅️ https://nicegui.io/documentation/page

ui.link('Back to main page', '/documentation#page')

i18n 多语言:

• ✅️ https://www.reddit.com/r/nicegui/comments/138fm2w/nicegui_1212_with_i18n_for_quasar_elements_and/

页面移动元素:

• ✅️ https://nicegui.io/documentation/element#move_elements
• ✅️ 花里胡哨的特性

[hhstore]

NiceGUI 常用组件:

配色:

• https://nicegui.io/documentation#color_theming

from nicegui import ui

ui.button('Default', on_click=lambda: ui.colors())
ui.button('Gray', on_click=lambda: ui.colors(primary='#555'))

ui.run()

• https://nicegui.io/documentation#dark_mode

from nicegui import ui

dark = ui.dark_mode()
ui.label('Switch mode:')
ui.button('Dark', on_click=dark.enable)
ui.button('Light', on_click=dark.disable)

ui.run()

Row:

• https://nicegui.io/documentation#row_element

Column:

• https://nicegui.io/documentation#column_element

Grid / AG Grid:

grid:

• https://nicegui.io/documentation#grid_element
• https://nicegui.io/documentation/grid

ag grid:

• https://nicegui.io/documentation#ag_grid
• https://www.ag-grid.com/

Chart:

• https://nicegui.io/documentation#chart

[hhstore]

🔥️ NiceGUI 高级功能:

Run JavaScript

• ✅️ 执行 js
• ✅️ Run JavaScript

Parameter injection

• ✅️ 路由传参数
• ✅️ Parameter injection

UI Updates

• ✅️ 组件数据更新
• ✅️ UI Updates

Refreshable UI functions

• ✅️ https://nicegui.io/documentation#refreshable_ui_functions
• ✅️ @ui.refreshable
• ✅️ 装饰器

import random
from nicegui import ui

numbers = []

@ui.refreshable
def number_ui() -> None:
    ui.label(', '.join(str(n) for n in sorted(numbers)))

def add_number() -> None:
    numbers.append(random.randint(0, 100))
    number_ui.refresh()

number_ui()
ui.button('Add random number', on_click=add_number)

ui.run()

Bindings

• ✅️ 自定义组件, 数据绑定

Keyboard

• ✅️ 按键效果控制, 快捷键等
• ✅️ Keyboard

Query Selector

• ✅️ Query Selector

[hhstore]

NiceGUI 组件:

Storage

• 存储
• Storage

app.storage.user.get('count', 0) + 1

app.storage.general:

app.storage.browser:

[hhstore]

NiceGUI 魔法部分:

• 内部实现的细节 & 原理

Auto-context

• ✅️ 自动上下文, 可以动态创建组件!!!
• ✅️ Auto-context

Generic Events

• ✅️ on 事件监听(vue), 可以给各种组件, 注册事件.
• ✅️ Generic Events

[hhstore]

NiceGUI 部署:

打包成 app:

• https://nicegui.io/documentation#package_for_installation

Server + Docker:

• Server Hosting

docker run -p 80:8080 -v $(pwd)/:/app/ \
    -d --restart always zauberzeug/nicegui:latest

[hhstore]

FastAPI 相关:

[hhstore]

Vue + Quasar 相关:

• Web Frontend: Vue.js UI Framework - Quasar #403

Tailwind CSS 相关:

• Web Frontend: CSS - Tailwind CSS #402 已单独整理在此.

[hhstore]

1