python web GUI框架-NiceGUI 教程(一)

python web GUI框架-NiceGUI 教程(一)

streamlit可以在一些简单的场景下仍然推荐使用,但是streamlit实在不灵活,受限于它的核心机制,NiceGUI是一个灵活的web框架,可以做web网站也可以打包成独立的exe。

基本元素

Label

显示一些文本。

python 复制代码
from nicegui import ui
ui.label('some label')
ui.run()

Icon

这些元素是基于 Quasar's QIcon 实现的。

python 复制代码
from nicegui import ui
ui.icon('thumb_up', color='primary').classes('text-5xl')
ui.run()

Avatar

avatar 元素是 Quasar's QAvatar 实现的。

python 复制代码
from nicegui import ui
ui.avatar('favorite_border', text_color='grey-11', square=True)
ui.avatar('img:https://nicegui.io/logo_square.png', color='blue-2')
ui.run()

Create a hyperlink.

创建超链接。要跳转到页面中的特定位置,您可以使用ui.link_target("name")放置可链接的锚点,并使用ui.link(target="#name")链接到该锚点。

python 复制代码
from nicegui import ui
ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')
ui.run()

Button

这个元素是基于Quasar's QBtn 实现的。

颜色参数接受类Quasar颜色、Tailwind颜色或CSS颜色。如果使用Quasar颜色,按钮将根据Quasar主题包括文本的颜色进行样式设置。注意,像"red"这样的颜色既是Quasar的颜色,也是CSS的颜色。在这种情况下,Quasar的颜色将被使用。

python 复制代码
from nicegui import ui
ui.button('Click me!', on_click=lambda: ui.notify(f'You clicked me!'))
ui.run()

Badge

badge 元素基于 Quasar's QBadge 完成。

python 复制代码
from nicegui import ui
with ui.button('Click me!', on_click=lambda: badge.set_text(int(badge.text) + 1)):
    badge = ui.badge('0', color='red').props('floating')
ui.run()

Toggle

这些选项可以指定为值列表,也可以指定为将值映射到标签的字典。在操作选项之后,调用update()来更新UI中的选项。

python 复制代码
from nicegui import ui
toggle1 = ui.toggle([1, 2, 3], value=1)
toggle2 = ui.toggle({1: 'A', 2: 'B', 3: 'C'}).bind_value(toggle1, 'value')
ui.run()

Radio Selection

这些选项可以指定为值列表,也可以指定为将值映射到标签的字典。在操作选项之后,调用update()来更新UI中的选项。

python 复制代码
from nicegui import ui
radio1 = ui.radio([1, 2, 3], value=1).props('inline')
radio2 = ui.radio({1: 'A', 2: 'B', 3: 'C'}).props('inline').bind_value(radio1, 'value')
ui.run()

这些选项可以指定为值列表,也可以指定为将值映射到标签的字典。在操作选项之后,调用update()来更新UI中的选项。

python 复制代码
from nicegui import ui
select1 = ui.select([1, 2, 3], value=1)
select2 = ui.select({1: 'One', 2: 'Two', 3: 'Three'}).bind_value(select1, 'value')
ui.run()

Checkbox

python 复制代码
from nicegui import ui
checkbox = ui.checkbox('check me')
ui.label('Check!').bind_visibility_from(checkbox, 'value')
ui.run()

Switch

python 复制代码
from nicegui import ui
switch = ui.switch('switch me')
ui.label('Switch!').bind_visibility_from(switch, 'value')
ui.run()
相关推荐
昂好的day3 分钟前
固高运动控制卡实战(下):点位运动与直线/圆弧插补 API 详解
开发语言·c#
充值内卷6 分钟前
[特殊字符] 自己动手做一个类 tldraw 的桌面白板:StepDraw 开源啦(C++ + WebView2 + Canvas)
开发语言·c++
raindayinrain7 分钟前
c++对象模型--内存布局,多态,运行时类型识别
开发语言·c++
aa小小9 分钟前
从0到1:Windows 本地部署 Qwen3 + Flask 接口(RAG 学习路线第1周踩坑实录)
python
镜子AI9 分钟前
镜子AI工程实践:用熵权法 + TOPSIS 做多方案选型排序(零依赖 Python)
开发语言·人工智能·python
估值探索者10 分钟前
【Python量化组合管理实战 02】钱该怎么分?等权、波动率倒数与动态评分三种配权实测
java·开发语言·python·接口·股票数据api接口
计算机魔术师11 分钟前
别人IPO发股票,Anthropic一口气搞出五类
前端
西索斯coding21 分钟前
Kimi K2.6 与 Qwen3.7 Max:跨文件修复评测与成本核算方法(2026)
开发语言·python·ai
梯度下降者23 分钟前
桌面应用自动化python——uiautomation API 如何找元素
python·自动化·窗口操作·uiautomation·控件识别
wuyk55524 分钟前
PyQt6-第10讲-PDF工具箱
python·microsoft·pdf·pyqt