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

devtools/2024/9/23 21:29:28/

传奇开心果微博文系列

    • 序言
    • 一、标签组件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 的标签示例

python">from nicegui import uiui.label('Hello World')ui.run()

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

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

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

在这里插入图片描述

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

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

python">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!！” 同时随机改变颜色、字体大小和字体粗细。你可以根据需要添加更多的颜色和样式选项。运行这个代码后，尝试多次点击按钮以查看不同的效果。

python">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 创建了一个开关组件。当开关被打开时，标签的文本、颜色、大小和粗细会随机变化；当开关关闭时，标签会恢复到初始状态。运行这个代码后，你可以通过切换开关来查看标签样式的变化。

python">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. 标签显示输入框组件输入的内容

python">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. 标签文字颜色间隔时间变换动画

python">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. 标签文字旋转动画

python">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. 标签位置变化动画

python">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. 标签大小变化动画

python">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. 标签透明度变化动画

python">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 类，并且可以立即设置其初始文本。

示例代码：

python">from nicegui import uiui.label('Hello NiceGui')ui.run()

2. 动态更新文本：

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

python">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. 样式调整：

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

python">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，以实现响应式的布局设计。
示例代码：

python">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. 事件处理：

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

python">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.ppmy.cn/devtools/116184.html

相关文章

英语学习交流平台|基于java的英语学习交流平台系统小程序(源码+数据库+文档)

英语学习交流平台|基于java的英语学习交流平台系统小程序(源码+数据库+文档)

英语学习交流平台系统小程序 目录 基于java的英语学习交流平台系统小程序 一、前言 二、系统设计 三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取： 博主介绍：✌️大厂码农|毕设布道师&…
阅读更多...
GPT提示词分享 —— 深度思考助手

GPT提示词分享 —— 深度思考助手

提示词👇 角色：你是一个帮助我训练深度思考的 AI 助手。 输入：关键词、主题或概念。 处理过程： - 使用深度和广度的标准来评价这个关键词、主题或概念，提供高质量、有价值的问题，探讨人类认知、情感和行为的…
阅读更多...
Linux命令分享 四 （ubuntu 16.04）（vi操作文件）

Linux命令分享 四 （ubuntu 16.04）（vi操作文件）

1、su 切换用户 su - 用户名 切换到该用户并将目录切换至该用户的主目录 **注意该语句执行后需要输入密码，输入密码时终端不回显（不会显示你输入的密码），输完直接回车即可 su 用户名 切换用户但不切换目录 su - root su root **注…
阅读更多...
基于微信小程序的剧本杀游玩一体化平台

基于微信小程序的剧本杀游玩一体化平台

作者：计算机学姐 开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。 专栏推荐：前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于微信小程序JavaSpringBootVueMySQL的剧…
阅读更多...
分布式计算技术是什么？在数据集成值得作用？

分布式计算技术是什么？在数据集成值得作用？

数据是现代科技技术的基础，面对爆炸性数据的增长，要求计算能力要求更高、数据整合和处理更有效，如何应对数据集成带来的挑战？本文将探讨分布式计算技术在数据集成中的优化作用。 一 分布式计算技术。 定义：分布式计算…
阅读更多...
基于GIKT深度知识追踪模型的习题推荐系统源代码+数据库+使用说明，后端采用flask，前端采用vue

基于GIKT深度知识追踪模型的习题推荐系统源代码+数据库+使用说明，后端采用flask，前端采用vue

基于GIKT深度知识追踪模型的习题推荐系统 目录结构 Flask-BackEnd flask后端 app 后端主体文件 alg 深度学习模块 data 数据集data_process.py 数据预处理gikt.py GIKT模型pebg.py PEBG模型params.py 一些参数train.py 仅模型训练train_test.py 模型训练和测试-五折交叉验证t…
阅读更多...
How can I stream a response from LangChain‘s OpenAI using Flask API?

How can I stream a response from LangChain‘s OpenAI using Flask API?

题意：怎样在 Flask API 中使用 LangChain 的 OpenAI 模型流式传输响应 问题背景： I am using Python Flask app for chat over data. In the console I am getting streamable response directly from the OpenAI since I can enable streming with a f…
阅读更多...
前端——JavaScript练习 做一个todoList

前端——JavaScript练习 做一个todoList

用前端制作一个todoList的表格，实现更新、删除、修改等功能。 涉及几个知识点： 设置最小高度（宽度）： .container{min-width: 350px;/* 最小宽度 最小不会小于210px */ } 去掉外轮廓 outline: none; 去除字…
阅读更多...
最新文章

Copyright @ 2022~2023