nicegui标签组件lable用法深度解读和示例，源代码IDE运行和调试通过，截图为证

news2024/12/25 4:14:44

传奇开心果微博文系列

    • 序言
    • 一、标签组件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/2158467.html

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

相关文章

美版iPhone 16 Pro完美改卡，15 Pro再见了

美版iPhone 16 Pro完美改卡，15 Pro再见了

资深果粉应该都知道，从iPhone 14起，所有美版的iPhone，都从eSIM实体SIM，改成了全eSIM方案，彻底放弃了实体卡槽，这就给卡贴机这一行业造成了毁灭性的打击。 因为国内无法使用eSIM，即使有低价的美版…
阅读更多...
什么是上层封禁海外流量

什么是上层封禁海外流量

上层封禁海外流量（Upper-layer Blocking of Overseas Traffic）是一种网络安全策略，旨在通过在网络传输的上层进行流量控制和过滤，从而阻止来自海外的恶意流量或不必要的访问。这一措施主要用于防止分布式拒绝服务（DDoS…
阅读更多...
C++笔记---set和map

C++笔记---set和map

1. 序列式容器与关联式容器 前面我们已经接触过STL中的部分容器如：string、vector、list、deque、array、forward_list等，这些容器统称为序列式容器，因为逻辑结构为线性序列的数据结构，两个位置存储的值之间一般没有紧密的关联关…
阅读更多...
数据驱动农业——农业中的大数据

数据驱动农业——农业中的大数据

橙蜂智能公司致力于提供先进的人工智能和物联网解决方案，帮助企业优化运营并实现技术潜能。公司主要服务包括AI数字人、AI翻译、埃域知识库、大模型服务等。其核心价值观为创新、客户至上、质量、合作和可持续发展。 橙蜂智农的智慧农业产品涵盖了多方面的功能&…
阅读更多...
win操作系统各个版本下载

win操作系统各个版本下载

MSDN, 我告诉你 - 做一个安静的工具站 (itellyou.cn) 下载地址链接转换工具 - 在线工具 (tool.lu) 通过这个网站可以再将ed2k转换成别的下载工具链接
阅读更多...
LLM安全风险及应对

LLM安全风险及应对

LLM安全风险主要从四个维度分析：用户输入、训练数据、模型本身以及工具和插件。 风险类别具体风险风险解释应对措施具体举例用户输入相关风险提示注入（Prompt Injection）攻击者通过设计特定输入，使模型生成恶意或不安全的输出。- …
阅读更多...
进度调度切换

进度调度切换

tips： 进程＝内核数据结构（PCB/task_struct）＋代码和数据 UID：每个用户对应的id 进程分类 & 进程关系 僵尸进程 父在子死 进程退出 代码不会再执行了，系统可以立即释放对应代码和数据进程…
阅读更多...
推荐一款开源的Redis桌面客户端

推荐一款开源的Redis桌面客户端

TinyRDM 是一个现代化的、轻量级的跨平台 Redis 桌面客户端，能在 Mac、Windows 和 Linux 系统上使用。它有着现代化的设计风格，界面既简洁又清晰，操作起来方便又高效。不管是刚开始接触的新手，还是经验丰富的开发者，都…
阅读更多...
【安装教程】Windows环境下Neo4j的安装与配置

【安装教程】Windows环境下Neo4j的安装与配置

【安装教程】Windows环境下Neo4j的安装与配置 Neo4j的概念一、安装前准备——JDK二、Neo4j的安装三、Neo4j的环境配置四、安装验证 Neo4j的概念 Neo4j 是一个高性能的图形数据库管理系统，它使用图形模型来存储和处理数据。Neo4j 的图形模型由节点和边组成&#xff0…
阅读更多...
WebLogic 漏洞复现

WebLogic 漏洞复现

1、后台弱⼝令GetShell 默认账号密码：weblogic/Oracle123 weblogic常⽤弱⼝令：https://cirt.net/passwords?criteriaweblogic 这⾥注意， 单个账号错误密码5次之后就会⾃动锁定。 http://47.121.212.195:7001/console 2、登录后台后&#…
阅读更多...
矩阵分析 线性空间和线性变换 笔记手稿

矩阵分析 线性空间和线性变换 笔记手稿

1线性空间的概念 数域 线性空间 证明 线性相关和线性无关 线性空间的基 基的性质 基变换和坐标变换 子空间和维数定理 两个子空间的交和和都是子空间 维数公式 子空间扩充定理 维数公式及其证明 直和 证明 线性空间的同构 注意：映射的概念 同构的性质 线性变换的…
阅读更多...
前端组件库Element UI 的使用

前端组件库Element UI 的使用

一、准备工作 1.确保安装了开发软件 VS Code（此处可查阅安装 VS Code教程），确保相关插件安装成功 2.安装Node.js 和创建Vue项目（此处可查阅安装创建教程） 3.成功在VS Code运行一个Vue项目（此处可查阅运行…
阅读更多...
HTML+CSS学习笔记

HTML+CSS学习笔记

目录 HTML 1.开发环境 2.创建HTML文件 3.HTML元素 3.1HTML文件结构 3.2HTML标签 3.3HTML属性​编辑​编辑 3.4HTML区块 3.4.1块元素 3.4.2行内元素 3.5HTML表单 CSS 1.CSS简介 2.CSS语法​编辑 3.CSS三种导入方式 内联样式 内部样式 外部样式 4.选择器​ 5.C…
阅读更多...
老挝语方言那么多，怎么沟通交流？可以用《老挝语翻译通》app

老挝语方言那么多，怎么沟通交流？可以用《老挝语翻译通》app

准备前往老挝探险，却担心语言不通？《老挝语翻译通》App来帮忙，专为老挝语学习者和旅行者设计，让你轻松掌握老挝语，无需打字，说话即可翻译。 应用特色： 中老互译：实时中文与老挝语互…
阅读更多...
xlsx单元格宽度自适应内容宽度

xlsx单元格宽度自适应内容宽度

xlsx单元格宽度自适应内容宽度 全选内容区域。参考 按下图操作
阅读更多...
文心智能体搭建步骤

文心智能体搭建步骤

通过使用文心智能体平台来创建智能体的过程。这种方法可以让没有编程经验的人也能快速构建智能体，降低了技 术门槛。以下是一些建议和心得: 1.选择合适的平台:文心智能体平台是一个优秀的选择，它提供了零代码和低代码的开发环境，极大地降低了…
阅读更多...
[Linux][进程] 认识进程

[Linux][进程] 认识进程

基本概念 进程是一个操作系统术语,用来管理与操作程序.在windows下打开任务管理器即可查看目前打开的所有进程 PCB 进程控制块,从代码层面来说 PCB 是进程所有属性的一个结构体,在Linux源码中PCB指的是struct task_struct. Linux环境下: 进程 task_struct 代码 …
阅读更多...
ARM（Day 3）汇编指令

ARM（Day 3）汇编指令

思维导图
阅读更多...
科技云报到：以数据“价值三角”为擎，探索数据治理实践路径

科技云报到：以数据“价值三角”为擎，探索数据治理实践路径

科技云报到原创。 过去四十年，经济发展主要来自于土地、劳动力、农业技术、工业技术等要素的充分释放。面向数字经济时代，无论是大模型、自动驾驶还是具身智能、人形机器人，数据已然成为继土地、劳动、资本和技术之后的又一种战略资产和新型…
阅读更多...
【遥感图像船舶检测数据集】

【遥感图像船舶检测数据集】

【遥感图像船舶检测数据集】nc1 标签names: [ship,] 名称：【‘船’】共4126张，8:1:1比例划分，（train;3300张，val：412张，test：414张标注文件为YOLO适用的txt格式。可以直接用于模型训…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023