【易上手快捷开发新框架技术】nicegui标签组件lable用法庖丁解牛深度解读和示例源代码IDE运行和调试通过截图为证

news2024/11/18 7:40:59

传奇开心果微博文系列

    • 序言
    • 一、标签组件lable最基本用法示例
      • 1.在网页上显示出 Hello World 的标签示例
      • 2. 使用 style 参数改变标签样式示例
    • 二、标签组件lable更多用法示例
      • 1. 添加按钮动态修改标签文字
      • 2. 点击按钮动态改变标签内容、颜色、大小和粗细示例代码
      • 3. 添加开关组件动态改变标签内容、颜色、大小和粗细示例代码
      • 4. 标签显示输入框组件输入的内容
    • 三、标签动画示例
      • 1. 标签文字颜色间隔时间变换动画
      • 2. 标签文字旋转动画
      • 3. 标签位置变化动画
      • 4. 标签大小变化动画
      • 5. 标签透明度变化动画
    • 四、知识点归纳
      • 1. 创建一个标签组件通常涉及到实例化 Label 类，并且可以立即设置其初始文本。
      • 2. 动态更新文本：
      • 3. 样式调整：
      • 4. 响应式布局：
      • 5. 事件处理：

序言

NiceGUI 中的 Label 组件主要用于显示静态文本信息。其作用是向用户传递明确的描述或提示。

用法通常如下：首先引入 NiceGUI 相关模块，创建应用实例。然后通过特定方法创建 Label 组件，并指定要显示的文本内容。可以设置字体、颜色等样式属性，还能根据布局需求将其放置在合适的位置，以增强界面的可读性和用户体验。您还可以为 Label 组件设置文本对齐方式，如左对齐、右对齐或居中对齐。同时，能够根据界面的交互需求，动态修改 Label 显示的文本内容。例如，当用户执行某个操作后，通过代码实时更新 Label 中的文字，向用户反馈操作结果或当前状态。此外，结合其他组件，如输入框，根据输入框的值来改变 Label 的显示内容，实现数据的关联和交互展示。

一、标签组件lable最基本用法示例

1.在网页上显示出 Hello World 的标签示例

from nicegui import ui

ui.label('Hello World')

ui.run()

运行这段代码，将会在网页上显示出 Hello World 的标签。
在这里插入图片描述

2. 使用 style 参数改变标签样式示例

from nicegui import ui
ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')
ui.run()

在这里插入图片描述

二、标签组件lable更多用法示例

1. 添加按钮动态修改标签文字

from nicegui import ui

# 创建标签并设置初始文本
label = ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')

# 创建一个按钮，当点击时会改变标签的文本
def change_label():
    label.set_text('Hello NiceGUI!')

ui.button('点击我', on_click=change_label)

ui.run()

在这里插入图片描述
在这里插入图片描述

2. 点击按钮动态改变标签内容、颜色、大小和粗细示例代码

在这个示例中，点击按钮后，标签的内容会变为 “Hello CSDN!！” 同时随机改变颜色、字体大小和字体粗细。你可以根据需要添加更多的颜色和样式选项。运行这个代码后，尝试多次点击按钮以查看不同的效果。

from nicegui import ui
import random

# 创建标签并设置初始文本、颜色、大小和粗细
label = ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')

# 定义可选的颜色和字体大小、粗细
colors = ['red', 'blue', 'green', 'orange', 'purple']
font_sizes = ['150%', '200%', '250%']
font_weights = ['100', '300', '400', '700']

# 创建一个函数来随机改变标签的内容、颜色、大小和粗细
def change_label():
    new_text = 'Hello CSDN!!'
    new_color = random.choice(colors)
    new_size = random.choice(font_sizes)
    new_weight = random.choice(font_weights)
    
    label.set_text(new_text)
    label.style(f'color: {new_color}; font-size: {new_size}; font-weight: {new_weight}')

ui.button('点击我改变标签', on_click=change_label)

ui.run()

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 添加开关组件动态改变标签内容、颜色、大小和粗细示例代码

在这个示例中，使用 ui.switch 创建了一个开关组件。当开关被打开时，标签的文本、颜色、大小和粗细会随机变化；当开关关闭时，标签会恢复到初始状态。运行这个代码后，你可以通过切换开关来查看标签样式的变化。

from nicegui import ui
import random

# 创建标签并设置初始文本、颜色、大小和粗细
label = ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')

# 定义可选的颜色和字体大小、粗细
colors = ['red', 'blue', 'green', 'orange', 'purple']
font_sizes = ['150%', '200%', '250%']
font_weights = ['100', '300', '400', '700']

# 创建一个函数来随机改变标签的内容、颜色、大小和粗细
def change_label(value):
    if value:  # 当开关打开时改变标签样式
        new_text = 'Hello CSDN!!'
        new_color = random.choice(colors)
        new_size = random.choice(font_sizes)
        new_weight = random.choice(font_weights)
        
        label.set_text(new_text)
        label.style(f'color: {new_color}; font-size: {new_size}; font-weight: {new_weight}')
    else:  # 当开关关闭时重置标签样式
        label.set_text('Hello World')
        label.style('color: red; font-size: 200%; font-weight: 300')

# 创建开关组件
ui.switch('切换标签样式', on_change=change_label)

ui.run()

在这里插入图片描述
在这里插入图片描述

4. 标签显示输入框组件输入的内容

from nicegui import ui

# 创建输入框和标签
input_text = ui.input('请输入内容：')
label = ui.label('')

# 创建确定按钮的回调函数
def submit():
    label.set_text(input_text.value)  # 设置标签的文本为输入框的值

# 创建确定按钮
ui.button('确定', on_click=submit)

# 运行 NiceGUI
ui.run()

在这里插入图片描述

三、标签动画示例

1. 标签文字颜色间隔时间变换动画

import random
from nicegui import ui

# 创建一个 label 组件，并设置初始文本和样式
label = ui.label('Hello, NiceGUI!').style('font-size: 24px; color: blue;')

# 使用 timer 函数创建一个定时器，每隔一段时间（这里是 0.3 秒）更新一次 label 的样式
def update_color():
    # 定义颜色列表
    colors = ['red', 'yellow', 'green', 'blue', 'purple', 'black']
    # 随机选择颜色
    color = random.choice(colors)
    # 设置颜色样式
    label.style(f'color: {color}; transition: color 0.5s ease-in-out')

ui.timer(0.3, update_color)

ui.run()

解释

创建标签组件：

创建一个标签组件，并设置初始文本为 “Hello, NiceGUI!”，字体大小为 24 像素，颜色为蓝色。
定义颜色更新函数：

定义一个函数 update_color，从预设的颜色列表中随机选择一种颜色，并更新标签的颜色样式。
设置颜色过渡效果，使颜色变化更平滑。
设置定时器：

使用 ui.timer 创建一个定时器，每隔 0.3 秒调用一次 update_color 函数，实现标签颜色的周期性变化。
启动应用：

调用 ui.run() 启动 NiceGUI 应用，使所有组件和逻辑生效。
通过这些步骤，实现了标签颜色每隔 0.3 秒随机变换的效果，并带有平滑过渡动画。
在这里插入图片描述
在这里插入图片描述

2. 标签文字旋转动画

from nicegui import ui

# 创建一个 label 组件，并设置初始文本和样式
label = ui.label('Hello, NiceGUI!').style('''
    font-size: 24px;
    color: blue;
    animation: rotate 2s linear infinite;
''')

# 定义 CSS 动画
ui.add_css('''
    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
''')

ui.run()

解释：
创建标签：使用 ui.label 创建一个标签，并设置初始文本和基本样式。
添加 CSS 样式：通过 .style() 方法为标签添加 CSS 样式，包括字体大小、颜色以及动画属性。
定义 CSS 动画：使用 ui.add_css 添加一个关键帧动画 rotate，使标签从 0 度旋转到 360 度。
启动应用：调用 ui.run() 启动 NiceGUI 应用。
这样就可以看到标签不断旋转的效果了。
在这里插入图片描述

3. 标签位置变化动画

from nicegui import ui

# 创建一个 label 组件，并设置初始文本和样式
label = ui.label('Hello, NiceGUI!').style('''
    font-size: 24px;
    color: blue;
    animation: moveRight 2s linear infinite;
''')

# 定义 CSS 动画
ui.add_css('''
    @keyframes moveRight {
        0% { transform: translateX(0); }
        50% { transform: translateX(100px); }
        100% { transform: translateX(0); }
    }
''')

ui.run()

解释总结
创建标签并设置初始样式：

创建一个标签组件，并设置初始文本为 “Hello, NiceGUI!”。
设置标签的字体大小为 24px，并且颜色为蓝色。
应用名为 moveRight 的动画，持续时间为 2 秒，线性过渡，无限循环。
定义 CSS 动画：

定义一个关键帧动画 moveRight，使标签在不同时间点水平方向向右移动。
0% { transform: translateX(0); }：初始状态位置不变。
50% { transform: translateX(100px); }：在 50% 时向右移动 100px。
100% { transform: translateX(0); }：最终恢复初始位置。
启动 NiceGUI 应用：

调用 ui.run() 启动 NiceGUI 应用。
这样就可以看到标签每隔 2 秒周期性地水平方向向右移动，并最终回到初始位置。
在这里插入图片描述

4. 标签大小变化动画

from nicegui import ui

# 创建一个 label 组件，并设置初始文本和样式
label = ui.label('Hello, NiceGUI!').style('''
    font-size: 24px;
    color: blue;
    animation: scale 2s linear infinite;
''')

# 定义 CSS 动画
ui.add_css('''
    @keyframes scale {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }
''')

ui.run()

解释：
创建标签：使用 ui.label 创建一个标签，并设置初始文本和基本样式。
添加 CSS 样式：
animation: scale 2s linear infinite; 应用名为 scale 的动画，持续时间为 2 秒，线性过渡，无限循环。
定义 CSS 动画：使用 ui.add_css 添加一个关键帧动画 scale，使标签在不同时间点进行缩放变化。
0% { transform: scale(1); } 初始状态不缩放。
50% { transform: scale(1.5); } 在 50% 时放大 1.5 倍。
100% { transform: scale(1); } 最终恢复原状。
启动应用：调用 ui.run() 启动 NiceGUI 应用。
这样就可以看到标签在大小上不断变化的效果了。你可以根据需要调整动画的具体参数。
在这里插入图片描述

5. 标签透明度变化动画

from nicegui import ui

# 创建一个 label 组件，并设置初始文本和样式
label = ui.label('Hello, NiceGUI!').style('''
    font-size: 24px;
    color: blue;
    animation: fade 3s linear infinite;
''')

# 定义 CSS 动画
ui.add_css('''
    @keyframes fade {
        0% { opacity: 1; }
        50% { opacity: 0.1; }
        100% { opacity: 1; }
    }
''')

ui.run()

创建标签并设置初始样式：

创建一个标签组件，并设置初始文本为 “Hello, NiceGUI!”。
设置标签的字体大小为 24px，并且颜色为蓝色。
应用名为 fade 的动画，持续时间为 3 秒，线性过渡，无限循环。
定义 CSS 动画：

定义一个关键帧动画 fade，使标签的透明度在不同时间点变化。
0% { opacity: 1; }：初始状态完全不透明。
50% { opacity: 0.1; }：在 50% 时透明度为 0.1。
100% { opacity: 1; }：最终恢复完全不透明。
启动 NiceGUI 应用：

调用 ui.run() 启动 NiceGUI 应用。
这样就可以看到标签的透明度每隔 3 秒周期性地变化，而颜色保持不变。
在这里插入图片描述

四、知识点归纳

以下是一些关于 NiceGUI 中 Label 组件的基本用法知识点：

1. 创建一个标签组件通常涉及到实例化 Label 类，并且可以立即设置其初始文本。

示例代码：

from nicegui import ui

ui.label('Hello NiceGui')

ui.run()

2. 动态更新文本：

标签组件的文本可以通过点击按钮来更新。
示例代码：

from nicegui import ui

# 创建标签并设置初始文本
label = ui.label('Hello World').style('color: red; font-size: 200%; font-weight: 300')

# 创建一个按钮，当点击时会改变标签的文本
def change_label():
    label.set_text('Hello NiceGUI!')

# 创建按钮并绑定点击事件
ui.button('点击我', on_click=change_label)

# 启动 NiceGUI 应用
ui.run()

3. 样式调整：

可以通过设置样式属性来改变标签的外观，如字体大小、颜色等。
示例代码：

from nicegui import ui

# 创建标签并设置初始文本和样式
label = ui.label('Hello World')
label.style('color: red; font-size: 200%; font-weight: 300')

# 启动 NiceGUI 应用
ui.run()

4. 响应式布局：

标签组件可以被嵌入到不同的布局容器中，例如 Row 或 Column，以实现响应式的布局设计。
示例代码：

from nicegui import ui

# 在列布局中添加标签
with ui.column():
    ui.label('Label in a column')

# 在行布局中添加标签
with ui.row():
    ui.label('Label1 in a row')
    ui.label('Label2 in a row')

# 启动 NiceGUI 应用
ui.run()

在这里插入图片描述

5. 事件处理：

尽管标签本身不直接支持事件处理（如点击事件），但可以通过其他方式（例如绑定到按钮或其他交互组件）间接地与标签互动。

from nicegui import ui

# 创建一个标签和滑块
with ui.column():
    label = ui.label('初始值: 0')
    slider = ui.slider(min=0, max=10, value=0)

# 定义一个函数来更新标签
def update_label():
    label.set_text(f'当前值: {slider.value}')

# 绑定滑块变化事件到更新标签的函数
slider.on('change', update_label)

# 启动 NiceGUI 应用
ui.run()

在这里插入图片描述

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

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

相关文章

RFID系统如何革新资产信息数字化管理

RFID系统如何革新资产信息数字化管理

在现代企业中，资产管理的有效性直接影响整体运营效率和成本控制。为了应对传统资产管理中存在的诸多挑战，越来越多的公司开始采用RFID系统，以实现资产信息的数字化管理，从而提高资产利用率和管理透明度。 RFID系统的主要优势 高…
阅读更多...
【USB】USB1.0、USB1.1、USB2.0、USB3.0、USB4.0介绍及最大速率说明

【USB】USB1.0、USB1.1、USB2.0、USB3.0、USB4.0介绍及最大速率说明

USB 1.0 and USB 1.1 1995 年，成立了 USB-IF，该组织于次年宣布推出 USB 1.0。USB 1.0 规定的数据速率为 1.5 Mbit/s（低带宽或低速），最大输出电流为 5V/500mA。但不幸的是，这个 USB 版本也很少被制造商采用。…
阅读更多...
C++ string的基本运用详细解剖

C++ string的基本运用详细解剖

string的基本操作 一.与C语言中字符串的区别二.标准库中的string三.string中常用接口的介绍1.string中常用的构造函数2.string类对象的容量操作函数3.string类对象的访问及遍历操作4.string类对象的修改操作5.string类的非成员函数6.string中的其他一些操作 一.与C语言中字符串…
阅读更多...
网页WebRTC电话和软电话哪个好用？

网页WebRTC电话和软电话哪个好用？

关于WebRTC电话与软件电话哪个更好用，这实际上取决于多个因素，并没有一个绝对的答案。不过，我可以根据WebRTC技术的一些特点，以及与传统软件电话相比的优劣势，为你提供一个清晰的对比。 首先，让我们了解一下…
阅读更多...
python画图|放大和缩小图像

python画图|放大和缩小图像

在较多的画图场景中，需要对图像进行局部放大，掌握相关方法非常有用，因此我们很有必要一起学习 【1】官网教程 首先是进入官网教程，找到学习资料： https://matplotlib.org/stable/gallery/subplots_axes_and_figures…
阅读更多...
uniapp在线打包的ios后调用摄像头失败的解决方法

uniapp在线打包的ios后调用摄像头失败的解决方法

uniapp在线打包的ios后调用摄像头失败的解决方法 解决方法： 由于未选中打包模块的配置 当你在测试时发现能够正常的开启摄像头，但是当你对其进行在线打包后，发现当你点击启用摄像头时，没有反应，或者是打开是黑屏状态…
阅读更多...
STM32F103C8----3-1 LED闪烁（跟着江科大学STM32）

STM32F103C8----3-1 LED闪烁（跟着江科大学STM32）

一，电路图 接线图 面包板的的使用请参考：《面包板的使用_面包板的详细使用方法-CSDN博客》 二，目的/效果 2.1 推婉输出 外部供电（熄的时间长） 2.2 推婉输出 内部供电(亮的时间长) 三，创建Keil项目 详…
阅读更多...
无人机之集群控制及应用

无人机之集群控制及应用

一、无人机集群控制 无人机集群控制是指通过先进的通信、导航和控制算法，实现多架无人机之间的协同、协调和高效的任务执行。其关键技术包括： 通信技术：实现无人机之间的实时数据传输和共享，确保集群控制的准确性和稳定性。 路径…
阅读更多...
RabbitMQ 高级特性——TTL

RabbitMQ 高级特性——TTL

文章目录 前言TTL设置消息的 TTL设置队列的 TTL 前言 对于前面讲到的重试机制中，当确认策略为 MANUAL 手动确认的时候，如果消费者出现了程序逻辑错误，那么消息就无法被争取处理，那么就会执行 basicNack 方法，如果我们…
阅读更多...
黑马头条day7-app端文章搜索

黑马头条day7-app端文章搜索

今天的内容也只是跑了一下 对于具体的实现掌握的很差 仔细看 es 在微服务学的es使用基本忘光了 这里用起来一点都熟悉 重学！！！ kafka异步 文章自动构建索引的时候用到了‘’ mongoDB 用来存储用户的搜索记录 遗忘（拦截器 j…
阅读更多...
【有啥问啥】In-Context Learning（上下文学习）：深入解析与应用实践

【有啥问啥】In-Context Learning（上下文学习）：深入解析与应用实践

In-Context Learning（上下文学习）：深入解析与应用实践 引言 在人工智能与机器学习的浪潮中，In-Context Learning（上下文学习）作为一种新兴的学习范式，正逐渐崭露头角。与传统的机器学习模型不…
阅读更多...
第四届机器人、自动化与智能控制国际会议（ICRAIC 2024）征稿

第四届机器人、自动化与智能控制国际会议（ICRAIC 2024）征稿

第四届机器人、自动化与智能控制国际会议（ICRAIC 2024）由湖南第一师范学院主办，南京师范大学、山东女子学院、爱迩思出版社（ELSP）协办。 大会将专注于机器人、数字化、自动化、人工智能等技术的开发和融合&#xff0c…
阅读更多...
Go实现RabbitMQ 死信队列、优化

Go实现RabbitMQ 死信队列、优化

死信队列是什么？ 如何配置死信队列？ go实现死信队列 go使用发布订阅模式改造批量发送消息 【教学内容】 1. 死信队列是什么？ 注意：业务队列与死信交换机的绑定是在构建业务队列时，通过参数（x-dead-le…
阅读更多...
计算机网络基础--认识协议

计算机网络基础--认识协议

目录 前言 一、IP地址与端口 二、网络协议 1.网络体系结构框架 2.网络字节序 前言 提示：这里可以添加本文要记录的大概内容： 计算机网络涉及非常广泛，这篇文章主要对计算机网络有个认识 提示：以下是本篇文章正文内容&#x…
阅读更多...
SNMP和Syslog有啥区别

SNMP和Syslog有啥区别

在网络管理的世界中，SNMP（简单网络管理协议）和 Syslog（系统日志）是两种关键技术，它们分别在监控和管理网络设备方面发挥着重要作用。选择合适的工具对于确保网络的高效运行、优化性能和增强安全性至关重要。…
阅读更多...
【易上手快捷开发新框架技术】nicegui组件button用法庖丁解牛深度解读源代码IDE运行和调试通过截图为证

【易上手快捷开发新框架技术】nicegui组件button用法庖丁解牛深度解读源代码IDE运行和调试通过截图为证

传奇开心果微博文系列 前言一、button 组件基本用法1. 最基本用法示例2. 创建带图标按钮 二、button按钮组件样式定制1. 按钮的尺寸调整2. 改变颜色示例3. 按钮的自定义字体大小4. 圆角形状示例5. 自定义边框6. 添加阴影7. 复合按钮8. 浮动按钮9. 可扩展浮动操作按钮QFAB10. 按…
阅读更多...
OpenCV视频I/O(14）创建和写入视频文件的类:VideoWriter介绍

OpenCV视频I/O(14）创建和写入视频文件的类:VideoWriter介绍

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 视频写入器类。 该类提供了用于写入视频文件或图像序列的 C API。 cv::VideoWriter 类是 OpenCV 库中用于创建和写入视频文件的一个类。它提供了…
阅读更多...
echarts实现3D柱状图（视觉层面）根据博主改编

echarts实现3D柱状图（视觉层面）根据博主改编

https://blog.csdn.net/weixin_57798646/article/details/131067725 这是原贴 在这个基础上我需要实现 一根柱子 代码如下 <!DOCTYPE html> <html lang"en" style"height: 100%"><head><meta charset"utf8"> </hea…
阅读更多...
【中间件学习】Nginx快速入门（为了配置一个项目）

【中间件学习】Nginx快速入门（为了配置一个项目）

-----------------------------本文章借鉴遇见狂神说--------------------------- 一、一个产品出现瓶颈&#xff1f;&#xff1f; 在一个产品刚刚上线的时候&#xff0c;并发量小&#xff0c;用户使用的少&#xff0c;所以在低并发的情况下&#xff0c;一个jar包启动应该就够…
阅读更多...
Anaconda虚拟环境默认路径在C盘怎么更改

Anaconda虚拟环境默认路径在C盘怎么更改

笔者已经新建好了虚拟环境并且安装了对应库&#xff0c;输入conda env list查询发现虚拟环境竟然安装到了C盘(&#xff61;•́︿•̀&#xff61;)&#xff0c;为避免下一次创建虚拟环境出错&#xff0c;笔者现在修改默认路径置D盘&#xff08;软件安装盘&#xff09; 参考两…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023