文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-10-10 14:04

关注

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

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

基本元素

Label

显示一些文本。

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

在这里插入图片描述



Icon

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

from nicegui import uiui.icon('thumb_up', color='primary').classes('text-5xl')ui.run()

在这里插入图片描述

Avatar

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

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

在这里插入图片描述

Link

Create a hyperlink.

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

from nicegui import uiui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')ui.run()

在这里插入图片描述



Button

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

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

from nicegui import uiui.button('Click me!', on_click=lambda: ui.notify(f'You clicked me!'))ui.run()

在这里插入图片描述

Badge

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

from nicegui import uiwith 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中的选项。

from nicegui import uitoggle1 = 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中的选项。

from nicegui import uiradio1 = 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中的选项。

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

在这里插入图片描述


Checkbox

from nicegui import uicheckbox = ui.checkbox('check me')ui.label('Check!').bind_visibility_from(checkbox, 'value')ui.run()

在这里插入图片描述


Switch

from nicegui import uiswitch = ui.switch('switch me')ui.label('Switch!').bind_visibility_from(switch, 'value')ui.run()

在这里插入图片描述

来源地址:https://blog.csdn.net/sinat_35773915/article/details/132542529

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯