此内容由英语原版由站长人工翻译成简体中文，可能存在不准确的翻译，请以官方原文为准。
原文链接：https://nicegui.io/documentation/section_text_elements

标签 Label

显示一些文字。

参数 Param	说明 Description
text	文本的内容

from nicegui import ui

ui.label('some label')

ui.run()

查看更多（本站-简体中文版本）查看更多（官方-英文版本）

链接 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()

聊天信息 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()

通用元素 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()

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()

reST文本 ReStructuredText

渲染 reST 文本。

参数 Param	说明 Description
content	需要显示的reST内容

from nicegui import ui

ui.restructured_text('This is **reStructuredText**.')

ui.run()

美人鱼图表 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()

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()

其他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()

除非另行声明，文章版权归 @于小丘所有，未经允许请勿转载。