search

hhstore / blog

My Tech Blog: about Mojo / Rust / Golang / Python / Kotlin / Flutter / VueJS / Blockchain etc.
https://github.com/hhstore/blog/issues
294 stars 24 forks source link

Python Web UI: NiceGUI #401

Open hhstore opened 1 year ago

hhstore commented 1 year ago

related:

hhstore commented 1 year ago

Python Web UI 方案: NiceGUI

官方资源:

依赖项目:

FastAPI

Vue.js 3.x:

Vue UI 框架: Quasar

CSS 样式: Tailwind

hhstore commented 1 year ago

NiceGUI 踩坑系列:

页面路由:

页面跳转方式:

ui.open()

ui.link()


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

i18n 多语言:

页面移动元素:

hhstore commented 1 year ago

NiceGUI 常用组件:

配色:

from nicegui import ui

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

ui.run()

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:

Column:

Grid / AG Grid:

grid:

ag grid:

Chart:

hhstore commented 1 year ago

🔥️ NiceGUI 高级功能:

Run JavaScript

Parameter injection

UI Updates

Refreshable UI functions


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

Query Selector

hhstore commented 1 year ago

NiceGUI 组件:

Storage


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

app.storage.general:

app.storage.browser:
hhstore commented 1 year ago

NiceGUI 魔法部分:

Auto-context

Generic Events

hhstore commented 1 year ago

NiceGUI 部署:

打包成 app:

Server + Docker:


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

FastAPI 相关:

hhstore commented 1 year ago

Vue + Quasar 相关:

Tailwind CSS 相关:

hhstore commented 1 year ago

1