通常在各种GUI界面中select checkbox raido text label button

如果我们学习过VB或者html这类知识，可能会理解会是选择框，文本框，单选、复选框，即使没有学习过也是经常用过的

• select下拉选择
• label:标签文本
• text/ textarea :输入文本
• checkbox复选框，通常的行为是打对勾 √

同样我们在word或者excel/vba中也会用到类似的组件，概念基本一致，只是表现形式不一样。

NiceGUI中的组件有哪些

Basic Elements

• Label
• Icon
• Avatar
• Link
• Button
• Badge
• Toggle
• Radio Selection
• Dropdown Selection
• Checkbox
• Switch
• Slider
• Joystick
• Text Input
• Textarea
• Number Input
• Knob
• Color Input
• Color Picker
• Date Input
• Time Input
• File Upload
• Chat Message
• Generic Element
• Markdown and HTML

from nicegui import ui
ui.label('some label')
ui.run()

我们可以看到这个 ui.label('some label')最后展示的是一个html页面

加上一个icon

加上两个图标icon

增加一个按钮button

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

加一个按钮button点击一次增加一个气泡数

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

实际上启动app.run后，nicegui应该是启动了一个服务器用来展示最终的元素

将python代码中描述的label，button等元素转换成html中的元素通过浏览器去分析这些结构我们可以发现

• ui.label对象变成了div
• ui.button转换成了html中的button元素

有有可能会问为什么不直接用vue去写页面，其实他就是用pyton代码去描述了一种结构nicegui负责将python描述的界面元素用html的方式展现出来，其实vue最终也是htmlcssjavascript，只不过对于我这种不擅长前端的人来说，它屏蔽了很多这样的知识。

它其实的目的写用nicegui的人不用关心界面是如何生成的，不然就变成的网页 +python的方式，这与flask django就没有太大的区别了，区非是前端用vue ,还是jquery还是单纯的html javascript

完整的代码效果如下

'''
Created on 2023 8 27 
@author: admin
'''
from nicegui import ui

ui.label('some label')
ui.icon('thumb_up', color='primary')\
                    .classes('text-5xl')

ui.avatar('favorite_border',  text_color='grey-11', square=True)
ui.avatar('img:https://nicegui.io/logo_square.png', color='blue-2')
ui.button('Click me!', \
          on_click=lambda: ui.notify(f'You clicked me!'))

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

ui.run() 

完整的演示视频