当前位置: 首页 > news >正文

python GUI nicegui初识一(登录界面创建)

最近尝试了python的nicegui库,虽然可能也有一些不足,但个人感觉对于想要开发不过对ui设计感到很麻烦的人来说是很友好的了,毕竟nicegui可以利用TailwindCSS和Quasar进行ui开发,并且也支持定制自己的css样式。

这里记录一下自己利用nicegui实现的一个登录的ui界面(并未实现具体功能)

from nicegui import uidef on_log():# print(label1.text())value1 = input1.valuevalue2 = input2.valueprint(value1,value2)#log ui
img = ui.image('img\991138.jpg').props("absolute-top text-center").tailwind('h-screen')
# with ui.image("img\991138.jpg").props("center no-repeat"):
with ui.label('').classes("absolute top-1/4 inset-x-1/3 w-1/3 rounded bg-slate-300 shadow-2xl bg-white opacity-80"):#使用网格布局才能使text-center生效with ui.grid():label1 = ui.label('欢迎访问!').tailwind("text-center text-2xl text-dark my-2")#发现一个问题,使用tailwind时无法获得控件的值,也就是说tailwind本身作为一个类仅仅起到修改控件#样式的作用,而且使用后就覆盖了原本的类的自身函数,可以利用.element解决此问题# input1 = ui.input('账号/邮箱').tailwind('text-blue-700','px-10').elementinput1 = ui.input('账号/邮箱').props("outlined").style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')input2 = ui.input('密码',password=True).props("outlined").style('padding-left: 2.5rem;padding-right: 2.5rem;')#'gap:10em'是CSS中的一种属性值,用于设置元素之间的间距。它表示间距的大小为10个字符的宽度。# 这个属性通常用于布局调整,可以在水平或垂直方向上增加或减少元素之间的间距。with ui.row().style('gap:12em'):link1 = ui.link('忘记密码').tailwind('ml-10 w-1/3 text-left')link2 = ui.link('注册账号').tailwind('ml-9 text-right')#单个空间用mxbutton1 = ui.button('登录',on_click=on_log).tailwind('mx-10 my-3')
# label2 = ui.label('label ').style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')ui.run()

效果:

CSS样式改变

这里主要介绍一下对于每个控件如何改变样式,主要有三种方式:classes,style,tailwind,props

 1.classes方法

功能:应用、删除或替换 HTML 类,这个可以利用 Tailwind or Quasar给出的参数修改样式

2.style方法

功能:应用、删除或替换 CSS 定义。这个使用需要注意的是里面添加的就是CSS样式。

input1 = ui.input('账号/邮箱').props("outlined").style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')

3.props方法

功能:添加或删除道具。

这允许使用 Quasar 的相关参数修改元素的外观或其布局。 由于 props 只是作为 HTML 属性应用,因此它们可以与任何 HTML 元素一起使用。

如果未指定任何值,则假定布尔属性为 True。

4.tailwind方法

功能:基于Tailwind实现的修改控件CSS样式。使用这个方法时有个问题需要注意,就是会导致原本控件无法使用原有的内置函数和属性,可以利用.element属性恢复控件。

from nicegui import Tailwind, uiui.label('Label A').tailwind.font_weight('extrabold').text_color('blue-600').background_color('orange-200')
ui.label('Label B').tailwind('drop-shadow', 'font-bold', 'text-green-600')red_style = Tailwind().text_color('red-600').font_weight('bold')
label_c = ui.label('Label C')
red_style.apply(label_c)
ui.label('Label D').tailwind(red_style)ui.run()

总之,利用nicegui我们无需在过多关注于ui的样式设计,能够快速利用现有的样式开发出自己的网页app。

参考网站:

NiceGUI

Height - TailwindCSS中文文档 | TailwindCSS中文网输入 | Quasar Framework 中文网 (quasarchs.com)

相关文章:

python GUI nicegui初识一(登录界面创建)

最近尝试了python的nicegui库,虽然可能也有一些不足,但个人感觉对于想要开发不过对ui设计感到很麻烦的人来说是很友好的了,毕竟nicegui可以利用TailwindCSS和Quasar进行ui开发,并且也支持定制自己的css样式。 这里记录一下自己利…...

【单片机】51单片机串口的收发实验,串口程序

这段代码是使用C语言编写的用于8051单片机的串口通信程序。它实现了以下功能: 引入必要的头文件,包括reg52.h、intrins.h、string.h、stdio.h和stdlib.h。 定义了常量FSOC和BAUD,分别表示系统时钟频率和波特率。 定义了一个发送数据的函数…...

【bug】记录一次使用Swiper插件时loop属性和slidersPerView属性冲突问题

简言 最近在vue3使用swiper时,突然发现loop属性和slides-per-view属性同时存在启用时,loop生效,下一步只能生效一次的bug,上一步却是好的。非常滴奇怪。 解决过程 分析属性是否使用错误。 loop是循环模式,布尔型。 …...

云原生应用里的服务发现

服务定义: 服务定义是声明给定服务如何被消费者/客户端使用的方式。在建立服务之间的同步通信通道之前,它会与消费者共享。 同步通信中的服务定义: 微服务可以将其服务定义发布到服务注册表(或由微服务所有者手动发布)…...

【零基础学Rust | 基础系列 | 基础语法】变量,数据类型,运算符,控制流

文章目录 简介:一,变量1,变量的定义2,变量的可变性3,变量的隐藏 二、数据类型1,标量类型2,复合类型 三,运算符1,算术运算符2,比较运算符3,逻辑运算…...

运输层---概述

目录 运输层主要内容一.概述和传输层服务1.1 概述1.2 传输服务和协议1.3 传输层 vs. 网络层1.4 Internet传输层协议 二. 多路复用与多路分解(解复用)2.1 概述2.2 无连接与面向连接的多路分解(解复用)2.3面向连接的多路复用*2.4 We…...

高速公路巡检无人机,为何成为公路巡检的主流工具

随着无人机技术的不断发展,无人机越来越多地应用于各个领域。其中,在高速公路领域,高速公路巡检无人机已成为公路巡检的得力助手。高速公路巡检无人机之所以能够成为公路巡检中的主流工具,主要是因为其具备以下三大特性。 一、高速…...

仓库管理系统有哪些功能,如何对仓库进行有效管理

阅读本文,您可以了解:1、仓库管理系统有哪些功能;2、如何对仓库进行有效管理。 仓库是制造业的开端,原材料的领料开始。企业的仓库管理是涉及企业生产、企业资金流和企业的经营风险的关键环节。在众多的工业企业、制造型企业、贸…...

Java 比Automic更高效的累加器

1、 java常见的原子类 类 Atomiclnteger、AtomicIntegerArray、AtomicIntegerFieldUpdater、AtomicLongArray、 AtomicLongFieldUpdater、AtomicReference、AtomicReferenceArray 和 AtomicReference- FieldUpdater 常见的原子类使用方法 使用 AtomicReference 来创建一个原…...

antDv table组件滚动截图方法的实现

在开发中经常遇到table内容过多产生滚动的场景,正常情况下不产生滚动进行截图就很好实现,一旦产生滚动就会变得有点棘手。 下面分两种场景阐述解决的方法过程 场景一:右侧不固定列的情况 场景二:右侧固定列的情况 场景一 打开…...

JavaSE【抽象类和接口】(抽象类、接口、实现多个接口、接口的继承)

一、抽象类 在 Java 中,一个类如果被 abstract 修饰称为抽象类,抽象类中被 abstract 修饰的方法称为抽象方法,抽象方法不用 给出具体的实现体。 1.语法 // 抽象类:被 abstract 修饰的类 public abstract class Shape { …...

微信小程序如何跳转H5页面

1、登录微信公众后台,进入【开发->开发管理->业务域名】,点击修改。 2、首先请下载校验文件,并将文件放置在域名根目录下。 我是把文件放在nginx主机的data目录下,然后通过增加nginx.config配置,重启nginx后可…...

C++(20):bit_cast

C++20之前如果想对不同的指针之间做类型转换需要通过reinterpret_cast,对于整数与指针之前的转换也需要通过reinterpret_cast: C++:reinterpret_cast_c++ reparant_cast_风静如云的博客-CSDN博客 但是reinterpret_cast的缺点是不同的编译环境下,无法包装转型的安全一致。 …...

STM32 低功耗-停止模式

STM32 停止模式 文章目录 STM32 停止模式第1章 低功耗模式简介第2章 停止模式简介2.1 进入停止模式2.1 退出停止模式 第3章 停止模式程序部分总结 第1章 低功耗模式简介 在 STM32 的正常工作中,具有四种工作模式:运行、睡眠、停止以及待机模式。 在系统…...

Hutool中 常用的工具类和方法

文章目录 日期时间工具类 DateUtil日期时间对象-DateTime类型转换工具类 Convert字符串工具类 StrUtil数字处理工具类 NumberUtilJavaBean的工具类 BeanUtil集合操作的工具类 CollUtilMap操作工具类 MapUtil数组工具-ArrayUtil唯一ID工具-IdUtilIO工具类-IoUtil加密解密工具类 …...

K8s(健康检查+滚动更新+优雅停机+弹性伸缩+Prometheus监控+配置分离)

前言 快速配置请直接跳转至汇总配置 K8s SpringBoot实现零宕机发布:健康检查滚动更新优雅停机弹性伸缩Prometheus监控配置分离(镜像复用) 配置 健康检查 健康检查类型:就绪探针(readiness) 存活探针&am…...

Django学习记录:使用ORM操作MySQL数据库并完成数据的增删改查

Django学习记录:使用ORM操作MySQL数据库并完成数据的增删改查 数据库操作 MySQL数据库pymysql Django开发操作数据库更简单,内部提供了ORM框架。 安装第三方模块 pip install mysqlclientORM可以做的事: 1、创建、修改、删除数据库中的…...

React Hooks 中的 useEffect(副作用)

useEffect 是什么? useEffect 是一个 React Hook,它允许你将组件与外部系统同步 当我们在 React 中使用 useEffect 这个 Hook 时,实际上是在告诉 React 在特定情况下执行我们定义的副作用函数。这种副作用函数可以处理一些与组件渲染结果无关…...

[CKA]考试之持久化存储卷PersistentVolume

由于最新的CKA考试改版,不允许存储书签,本博客致力怎么一步步从官网把答案找到,如何修改把题做对,下面开始我们的 CKA之旅 题目为: Task 创建一个pv,名字为app-config,大小为2Gi,…...

基于LLM的SQL应用程序开发实战(一)

基于LLM的SQL应用程序开发实战(一) 16.1 SQL on LLMs应用程序初始化 本节主要从案例代码的角度切入,探索ChatGPT以及大模型,尤其是从生产环境的视角,来思考具体的最佳实践。本节主要跟大家谈的是,在LangChain这样一个框架下,我们使用GPT-3.5或者GPT-4大模型,同时使用第…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...