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

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

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

基本元素

Slider

from nicegui import uislider = ui.slider(min=0, max=100, value=50)
ui.label().bind_text_from(slider, 'value')ui.run()

在这里插入图片描述

Joystick

创建一个基于nipple.js的操纵杆


ui.joystick(color='blue', size=50,on_move=lambda e: coordinates.set_text(f"{e.x:.3f}, {e.y:.3f}"),on_end=lambda _: coordinates.set_text('0, 0'))
coordinates = ui.label('0, 0')ui.run()

在这里插入图片描述

Text Input

这个元素是基于Quasar’s QInput组件。每次击键都会调用on_change事件,值也会相应地更新。如果你想等到用户确认输入,你可以注册一个自定义的事件回调,例如ui.input(…).on(‘keydown.enter’,…)或ui.input(…).on(‘blur’,…)。可以使用验证参数来定义验证规则的字典。第一个失败的规则的键将显示为错误消息。

在这里插入图片描述

Textarea

这个元素是基于Quasar’s QInput组件。类型设置为textarea以创建多行文本输入。您可以使用validation参数来定义验证规则的字典。第一个失败的规则的键值将显示为一个错误消息。

from nicegui import uiui.textarea(label='Text', placeholder='start typing',on_change=lambda e: result.set_text('you typed: ' + e.value))
result = ui.label()ui.run()

在这里插入图片描述

Number Input

这个元素是基于Quasar’s QInput组件。您可以使用validation参数来定义验证规则的字典。第一个失败的规则的键将显示为错误消息。

from nicegui import uiui.number(label='Number', value=3.1415927, format='%.2f',on_change=lambda e: result.set_text(f'you entered: {e.value}'))
result = ui.label()ui.run()

在这里插入图片描述

Knob

这个元素是基于Quasar’s QKnob组件。该元素用于通过鼠标/触摸平移获取用户输入的数字。

from nicegui import uiknob = ui.knob(0.3, show_value=True)with ui.knob(color='orange', track_color='grey-2').bind_value(knob, 'value'):ui.icon('volume_up')ui.run()

在这里插入图片描述

Color Input

from nicegui import uilabel = ui.label('Change my color!')
ui.color_input(label='Color', value='#000000',on_change=lambda e: label.style(f'color:{e.value}'))ui.run()

在这里插入图片描述

Color Picker

from nicegui import uiwith ui.button(icon='colorize') as button:ui.color_picker(on_pick=lambda e: button.style(f'background-color:{e.color}!important'))ui.run()

在这里插入图片描述

Date Input

这个元素是基于Quasar’s QDate组件。日期是一个字符串,格式由掩码参数定义。您也可以使用范围或多个道具来选择一个日期范围或多个日期:

ui.date({'from': '2023-01-01', 'to': '2023-01-05'}).props('range')
ui.date(['2023-01-01', '2023-01-02', '2023-01-03']).props('multiple')
ui.date([{'from': '2023-01-01', 'to': '2023-01-05'}, '2023-01-07']).props('multiple range')
from nicegui import uiui.date(value='2023-01-01', on_change=lambda e: result.set_text(e.value))
result = ui.label()ui.run()

在这里插入图片描述

Time Input

这个元素是基于Quasar’s QTime组件。时间是一个字符串,格式由掩码参数定义。

from nicegui import uiui.time(value='12:00', on_change=lambda e: result.set_text(e.value))
result = ui.label()ui.run()

在这里插入图片描述

File Upload

基于Quasar’s QUploader组件。

from nicegui import uiui.upload(on_upload=lambda e: ui.notify(f'Uploaded {e.name}')).classes('max-w-full')ui.run()

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

几个nlp的小任务(机器翻译)

几个nlp的小任务(机器翻译) 安装依赖库数据集介绍与模型介绍加载数据集看一看数据集的样子评测测试数据预处理测试tokenizer处理目标特殊的token预处理函数对数据集的所有数据进行预处理微调预训练模型设置训练参数需要一个数据收集器,把处理好数据喂给模型设置评估方法参数…

python爬虫12:实战4

python爬虫12:实战4 前言 ​ python实现网络爬虫非常简单,只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点,方便以后复习。 申明 ​ 本系列所涉及的代码仅用于个人研究与讨论,并不会对网站产生不好…

yo!这里是Linux基础开发工具介绍

目录 前言 基础开发工具 yum vim 1.基本介绍 2.基本操作 3.正常模式常用命令 4.底行模式常用命令 gcc/g gdb 1.基本介绍 2.常用操作 make/Makefile 1.背景 2.介绍 3.使用 git 1.介绍 2.操作 进度条程序简单实现 后记 前言 在学完初步的基础指令及权限控…

JVM虚拟机:定位对象的两种方式

定位对象的方式 1、句柄池 2、直接指针 ‘句柄池 直接指针 在Java中,可以使用两种方式来定位对象:句柄池和直接指针。 1. 句柄池:在Java的句柄池模型中,Java虚拟机(JVM)会为每个对象创建一个句柄&#xff…

关于 MySQL、PostgresSQL、Mariadb 数据库2038千年虫问题

MySQL 测试时间:2023-8 启动MySQL服务后,将系统时间调制2038年01月19日03时14分07秒之后的日期,发现MySQL服务自动停止。 根据最新的MySQL源码(mysql-8.1.0)分析,sql/sql_parse.cc中依然存在2038年千年虫…

【UE5】用法简介-使用MAWI高精度树林资产的地形材质与添加风雪效果

首先我们新建一个basic工程 然后点击floor按del键,把floor给删除。 只留下空白场景 点击“地形” 在这个范例里,我只创建一个500X500大小的地形,只为了告诉大家用法,点击创建 创建好之后有一大片空白的地形出现 让我们点左上角…

以udp协议创建通信服务器

概念图 创建服务器让A,B主机完成通信。 认识接口 socket 返回值:套接字,你可以认为类似fd 参数: domain->:哪种套接字,常用AF_INET(网络套接字)、AF_LOCAL(本地套接字)type->:发送数据类型,常用 …

基于Java+SpringBoot+Vue前后端分离美食推荐商城设计和实现

博主介绍:✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专…

云计算和Docker分别适用场景

在大规模网络爬虫系统中,通过使用云计算和Docker技术,可以实现大规模网络爬虫系统的高效架构设计和部署。这种架构能够提供可扩展性、高可用性和灵活性,为爬虫系统的运行和管理带来便利。 云计算和Docker在大规模网络爬虫系统中有不同的业务…

【golang】15、cobra cli 命令行库

Cobra 是 golang 最流行的命令行库,文档见 一、脚手架 mkdir pt && cd pt && go mod init cobra-cli init # 在项目下运行即可生成脚手架# tree . ├── LICENSE ├── cmd # 生成了cmd目录 │ └── root.go # 生成了root.go, 其中定义了ro…

b树/b+树、时间轮、跳表、LSM-Tree

b树、b树:关系型数据库核心存储结构 1、为什么磁盘数据存储结构用B树、而不用红黑树 磁盘每次读取不是读一个节点、是返回一页数据。 红黑树每次遍历一个节点排除一半数据。 B树通常映射相邻的磁盘页数据。4K mysql索引一个节点隐射16k故而映射4倍,故…

Ubuntu Touch OTA-2 推出,支持 Fairphone 3 和 F(x)tec Pro1 X

导读UBports 基金会近日宣布为基于 Ubuntu 20.04 LTS (Focal Fossa) 的 Ubuntu Touch 移动操作系统发布并全面提供 OTA-2 软件更新。 Ubuntu Touch OTA-2 在首次 OTA 更新整整四个月后发布,支持新设备,包括 Fairphone 3、F(x)tec Pro1 X 和 Vollaphone X…

【Go 基础篇】探索Go语言中Map的神奇操作

嗨,Go语言的学习者们!在编程世界中,Map是一个强大而又有趣的工具,它可以帮助我们高效地存储和操作键值对数据。Map就像是一本字典,可以让我们根据关键字(键)快速找到对应的信息(值&a…

烟花厂人员作业释放静电行为检测算法

烟花厂人员作业释放静电行为检测算法通过pythonyolo系列算法模型框架,烟花厂人员作业释放静电行为检测算法在工厂车间入口处能够及时捕捉到人员是否触摸静电释放仪。一旦检测到人员进入时没有触摸静电释放仪,系统将自动触发告警。Python是一种由Guido va…

Android 绘制之文字测量

drawText() 绘制文字 绘制进度条:paint.strokeCap Paint.CAP.RONUD 线条两边样式 设置文字字体:paint.typeFace Resources.Compat.getFont(context,font) 设置加粗 paint.isFakeBoldText 设置居中: paint.setTextAlign Paint.Align.CENTER //居中, 并不是真正的居中 往…

软件工程(九) UML顺序-活动-状态-通信图

顺序图和后面的一些图,要求没有用例图和类图那么高,但仍然是比较重要的,我们也需要按程度去了解。 1、顺序图 顺序图(sequence diagram, 顺序图),顺序图是一种交互图(interaction diagram),它强调的是对象之间消息发送的顺序,同时显示对象之间的交互。 下面以一个简…

【C语言】程序环境预处理 -- 详解

一、程序的翻译环境和执行环境 在 ANSI C 的任何一种实现中,存在两个不同的环境。 翻译环境,在这个环境中源代码被转换为可执行的机器指令。执行环境,它用于实际执行代码。 1、翻译环境 组成一个程序的每个源文件通过编译过程分别转换成目标代…

无涯教程-分类算法 - Python实现函数

为了在Python中实现SVM,无涯教程将从标准库导入开始,如下所示- import numpy as np import matplotlib.pyplot as plt from scipy import stats import seaborn as sns; sns.set() 接下来,从sklearn.dataset.sample_generator创建具有线性可…

Redis 7 教程 数据持久化

总体 RDB 介绍 RDB 持久化以指定的时间间隔执行数据集的时间点快照 。 把某一时刻的数据和状态以文件的形式写到磁盘上,即使出现故障宕机,快照文件也不会丢失,数据的可靠性得到保证。快照文件就是RDB(Redis DataBase)文件(dump.rdb) 作用 在指定的时间间隔内将内存中的数…

时序预测 | MATLAB实现基于PSO-LSTM、LSTM时间序列预测对比

时序预测 | MATLAB实现基于PSO-LSTM、LSTM时间序列预测对比 目录 时序预测 | MATLAB实现基于PSO-LSTM、LSTM时间序列预测对比效果一览基本描述程序设计参考资料 效果一览 基本描述 MATLAB实现基于PSO-LSTM、LSTM时间序列预测。 1.Matlab实现PSO-LSTM和LSTM神经网络时间序列预测…