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

news2024/7/4 6:18:45

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

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

基本元素

Label

显示一些文本。

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

在这里插入图片描述



Icon

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

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

在这里插入图片描述

Avatar

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

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

在这里插入图片描述

Link

Create a hyperlink.

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

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的颜色将被使用。

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


在这里插入图片描述

Badge

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

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

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

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

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

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


在这里插入图片描述


Switch

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/942534.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

科研小工具|心输出量(超声)(cardiac output,CO)

​ 简介 心输出量(cardiac output,CO)是指左或右心室每分钟泵出的血液量。即心率与每搏出量的乘积。如心率以75次/分钟计算,则心排出量在男性为5~6L,女性略低些。心排出量随着机体代谢和活动情况而变化。在肌肉运动、…

783页19万字行政服务中心一网通办政务服务应用平台建设方案

导读:原文《783页19万字行政服务中心一网通办政务服务应用平台建设方案》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。以下是部分内容, 第三…

阿里巴巴FastJson包的使用心得

阿里巴巴FastJson包的使用心得 1.FastJson简介2.FastJson特性3.引入FastJson4.FastJson中的一些对象(1)JSONObject(2)JSONArray(3)SerializeWriter 4.FastJson中的一些操作(1) 将Jav…

配置uniapp调试环境

目录 uni-app介绍 uni-app开发工具HBuilderX 创建项目前提条件 uni-app项目结构 配置mumu模拟器 uni-app生命周期 1.应用生命周期 小程序规范 2.页面生命周期-小程序规范 3.组件生命周期 vue规范 uni-app登录按钮方法 uni-app发布安卓app uni-app介绍 uni-app 是一个…

深入理解ArrayList的动态扩容机制及应用

在java编程中,数据结构起着至关重要的作用,而ArrayList作为一种常用的动态数组,为我们在处理数据时提供了便利。其中,其独特的动态扩容机制更是为其赢得了广泛的应用。我们不管在工作还是面试中,都会遇到ArrayList&…

Docker拉取RocketMQ及可视化界面

本文介绍Docker拉取RocketMQ及可视化界面操作步骤 Linux下安装Docker请参考:Linux安装Docker 文章目录 安装namesrv创建挂载目录授权相关权限拉取镜像运行容器查看运行情况 安装Broker创建挂载目录及配置文件目录授权相关权限创建配置文件运行容器查看运行情况 安装…

网络编程套接字(3): 简单的TCP网络程序

文章目录 网络编程套接字(3)4. 简单的TCP网络程序4.1 服务端创建(1) 创建套接字(2) 绑定端口(3) 监听(4) 获取新连接(5) 处理读取与写入 4.2 客户端创建(1)连接服务器 4.3 代码编写(1) v1__简单发送消息(2) v2_多进程版本(3) v3_多线程版本(4) v4_线程池版本 网络编程套接字(3)…

博客系统后端(项目系列2)

目录 前言 : 1.准备工作 1.1创建项目 1.2引入依赖 1.3创建必要的目录 2.数据库设计 2.1博客数据 2.2用户数据 3.封装数据库 3.1封装数据库的连接操作 3.2创建两个表对应的实体类 3.3封装一些必要的增删改查操作 4.前后端交互逻辑的实现 4.1博客列表页 …

中国建筑出版传媒许少辉博士八一新书乡村振兴战略下传统村落文化旅游设计日京东当当畅销榜自由营九三学

中国建筑出版传媒许少辉博士八一新书乡村振兴战略下传统村落文化旅游设计日京东当当畅销榜自由营九三学

大数据Flink(六十九):SQL 数据类型

文章目录 SQL 数据类型 一、原子数据类型 二、​​​​​​复合数据类型 SQL 数据类型 在介绍完一些基本概念之后,我们来认识一下

二级MySQL(二)——编程语言,函数

SQL语言又称为【结构化查询语言】 请使用FLOOR(x)函数求小于或等于5.6的最大整数 请使用TRUNCATE(x,y)函数将数字1.98752895保留到小数点后4位 请使用UPPER()函数将字符串‘welcome’转化为大写…

SOLIDWORKS工程图转DWG图层映射技巧

DWG格式的图纸在工程制图中有着非常重要的地位,工程实践中常常就需要将SOLIDWORKS工程图进行转换。对于两者之间数据衔接的妥善处理,是提升工作效率的有效手段。基于此目的,本次我们将介绍数据衔接的一个有效解决方案:图层数据的映…

中国建筑出版传媒许少辉八一新书乡村振兴战略下传统村落文化旅游设计日

中国建筑出版传媒许少辉八一新书乡村振兴战略下传统村落文化旅游设计日

Jmeter(二十九):Jmeter常用场景梳理

一、每秒钟固定调用次数 如果想控制每秒发送请求数量,仅仅通过线程数与循环次数是不够的,因为这只能控制发送总数,而要控制每秒发送数量,需要线程数与常数吞吐量控制器的搭配使用,这种场景在性能测试中使用不多。 例如每秒钟调用30次接口,那么把线程数设置为30,将常数…

c# modbus CRC计算器(查表法)

一、简介: 本案例为crc计算器,通过查表法计算出结果 1.窗体后台源代码 using Crc; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text…

Matlab图像处理-除法运算

除法运算 除法运算可用于去除数字化器灵敏度随空间变化造成的影响。图像的除法运算给出的是两幅图像相应像素值的变化比率,而不是每个像素的绝对差异,因而图像除法也称为比率变换,常用于校正成像设备的非线性影响。 在 MATLAB图像处理工具箱…

IDEA集成Git相关操作知识(pull、push、clone)

一:集成git 1:初始化git(新版本默认初始化) 老版本若没有,点击VCS,选中import into Version Controller中的Create git Repository(创建git仓库),同理即可出现git符号。 也可查看源文件夹有没有…

IT和OT:如何弥合差距?

两则企业故事 我们曾经碰到一家食品工厂由于订单数据转换不正确,导致加载的产品不正确,将错误的液体装满了卡车。因为IT和OT不能很好地协同工作。因此,它必须被抽回去,导致大量的时间和金钱损失。将新的业务系统集成到整个IT环境…

Java并发编程第6讲——线程池(万字详解)

Java中的线程池是运用场景最多的并发框架,几乎所有需要异步或并发执行任务的程序都可以使用线程池,本篇文章就详细介绍一下。 一、什么是线程池 定义:线程池是一种用于管理和重用线程的技术(池化技术),它主…

Python学习之二 变量与简单数据类型

(一) 变量 在学习之一 中,我们直接将一些数进行运算,在实际编程过程中,我们往往使用变量来保存一些内容。变量的命名需要遵循标识符的命名规则,只能包括字母、数字和_,并且必须以字母或_开始。强烈建议Python PEP8 编…