此内容由英语原版由站长人工翻译成简体中文,可能存在不准确的翻译,请以官方原文为准。
原文链接:https://nicegui.io/documentation/section_text_elements
原文链接:https://nicegui.io/documentation/section_text_elements
标签 Label
显示一些文字。
参数 Param | 说明 Description |
---|---|
text | 文本的内容 |
from nicegui import ui
ui.label('some label')
ui.run()
![图片[1]-NiceGUI - 文本元素 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2024/11/4e5d9f3a8491e210955997e6f3741d0b.webp)
链接 Link
创建一个超链接。
要跳转到页面中的特定位置,您可以使用ui.link_target("name")
,并使用ui.link(target="#name")
定位到此元素。
参数 Param | 说明 Description |
---|---|
text | 显示的文字 |
target | page 函数、同一页面上的 NiceGUI 元素或字符串,该字符串是绝对 URL 或与基本 URL 的相对路径 |
new_tab | 在新标签页中打开链接(默认值:False) |
from nicegui import ui
ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')
ui.run()
![图片[2]-NiceGUI - 文本元素 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2024/11/5406733ed3a81b99a005dc7b68d1d183.webp)
聊天信息 Chat Message
基于 Quasar 的 Chat Message 组件。
参数 Param | 说明 Description |
---|---|
text | 消息正文(可以是多个消息部分的字符串列表) |
name | 消息发送者姓名 |
label | 仅呈现标签 header/section |
stamp | 消息时间戳 |
avatar | 头像(URL) |
sent | 渲染为已发送消息(仅允许当前用户)(默认值:False) |
text_html | 将消息内容渲染成HTML(默认值:False) |
from nicegui import ui
ui.chat_message('Hello NiceGUI!',
name='Robot',
stamp='now',
avatar='https://robohash.org/ui')
ui.run()
![图片[3]-NiceGUI - 文本元素 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2024/11/47042e05159eb2fe18feea93d57808f4.webp)
通用元素 Generic Element
此类是所有其他 UI 元素的基类。 您可以使用它来创建具有任意 HTML 标签的元素。
参数 Param | 说明 Description |
---|---|
tag | 元素的HTML标签 |
_client | 元素的client(仅供内部使用) |
from nicegui import ui
with ui.element('div').classes('p-2 bg-blue-100'):
ui.label('inside a colored div')
ui.run()
![图片[4]-NiceGUI - 文本元素 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2024/11/e16fb17fd5f2ca9bf6e6e01c9d0c2a2e.webp)
Markdown元素 Markdown Element
渲染Markdown。
参数 Param | 说明 Description |
---|---|
content | 需要渲染的Markdown内容 |
extras | lmarkdown2扩展(默认值:['fenced-code-blocks', 'tables'] ) |
from nicegui import ui
ui.markdown('This is **Markdown**.')
ui.run()
![图片[5]-NiceGUI - 文本元素 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2024/11/6133b2f007281a1cf211a79576fb384a.webp)
reST文本 ReStructuredText
渲染 reST 文本。
参数 Param | 说明 Description |
---|---|
content | 需要显示的reST内容 |
from nicegui import ui
ui.restructured_text('This is **reStructuredText**.')
ui.run()
![图片[6]-NiceGUI - 文本元素 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2024/11/ed335b429e90797a407a9bece599181d.webp)
美人鱼图表 Mermaid Diagrams
呈现以 Markdown 启发的 Mermaid 语言编写的图表和图表。 Mermaid 语法也可以在 Markdown 元素中使用,方法是向 ui.markdown
元素提供扩展字符串 'mermaid'。
可选的配置字典在呈现第一个图表之前直接传递给 mermaid。 这可用于设置诸如
{'securityLevel': 'loose', ...}
- 允许在单击节点时运行 JavaScript{'logLevel': 'info', ...}
- 将调试信息记录到控制台
有关选项的完整列表,请参阅 mermaid 文档中的 mermaid.initialize()
方法。
参数 Param | 说明 Description |
---|---|
content | 需要显示的Mermaid图表 |
config | 传递给mermaid.initialize() 的配置字典 |
from nicegui import ui
ui.mermaid('''
graph LR;
A --> B;
A --> C;
''')
ui.run()
![图片[7]-NiceGUI - 文本元素 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2024/11/d20a172c6cd18b2307f74c475103163e.webp)
HTML 元素 HTML Element
将任意HTML内容呈现到页面上,并包装在指定的标签中。 您也可以在其中使用Tailwind样式。您还可以使用ui.add_head_html
将HTML代码添加到<head>中,使用ui.add_body_html
添加到的<body>中。
参数 Param | 说明 Description |
---|---|
content | 需要显示的HTML代码 |
tag | HTML标签(默认值: "div") |
from nicegui import ui
ui.html('This is <strong>HTML</strong>.')
ui.run()
![图片[8]-NiceGUI - 文本元素 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2024/11/9dc053cc0d291782573aa9a4e2623e3a.webp)
其他HTML标签 Other HTML Elements
一个允许您插入类似<span>
、<div>
、 <p>
等等其他HTML元素的模块。它等效于使用带tag
参数的ui.element
方法。
与任何其他元素一样,您可以添加classes
、style
、props
、tooltips
和event
。 一个方便之处是,这些关键字参数会自动添加到元素的 props
字典中。
from nicegui import html, ui
with html.section().style('font-size: 120%'):
html.strong('This is bold.') \
.classes('cursor-pointer') \
.on('click', lambda: ui.notify('Bold!'))
html.hr()
html.em('This is italic.').tooltip('Nice!')
with ui.row():
html.img().props('src=https://placehold.co/60')
html.img(src='https://placehold.co/60')
ui.run()
![图片[9]-NiceGUI - 文本元素 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2024/11/a6203dcfc833ba47406c3c6100749efe.webp)
© 版权声明
除非另行声明,文章版权归 @于小丘 所有,未经允许请勿转载。