python web GUI框架-NiceGUI 教程（一）

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

基本元素

Label

显示一些文本。

<code>from nicegui import ui

ui.label('some label')

ui.run()

Icon

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

<code>from nicegui import ui

ui.icon('thumb_up', color='primary').classes('text-5xl')code>

ui.run()

Avatar

<code>from nicegui import ui

ui.avatar('favorite_border', text_color='grey-11', square=True)code>

ui.avatar('img:https://nicegui.io/logo_square.png', color='blue-2')code>

ui.run()

Link

<code>from nicegui import ui

ui.button('Click me!', on_click=lambda: ui.notify(f'You clicked me!'))

ui.run()

Badge

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

<code>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')code>

ui.run()

Toggle

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

<code>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中的选项。

<code>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()

Dropdown Selection

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

<code>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

<code>from nicegui import ui

checkbox = ui.checkbox('check me')

ui.label('Check!').bind_visibility_from(checkbox, 'value')

ui.run()

Switch

<code>from nicegui import ui

switch = ui.switch('switch me')

ui.label('Switch!').bind_visibility_from(switch, 'value')

ui.run()