Hier ist noch viel Überarbeitung nötig!

https://nicegui.io/documentation/section_text_elements

Text Elements

Etikett

Zeigt einen Text an.

Text:	den Inhalt des Etiketts

main.py

from nicegui import ui

ui.label('some label')

ui.run()

NiceGUI

irgendein Etikett

Siehe mehr…

Link

Erstellen Sie einen Hyperlink.

Um zu einer bestimmten Stelle innerhalb einer Seite zu springen, können Sie mit ui.link_target(„name“) verlinkbare Anker setzen und mit ui.link(target=“#name“) darauf verlinken.

Text:	Anzeigetext
Ziel:	Seitenfunktion, NiceGUI-Element auf derselben Seite oder String, der eine absolute URL oder ein relativer Pfad von der Basis-URL ist
neue_tab:	Link in neuer Registerkarte öffnen (Standard: False)

main.py

from nicegui import ui

ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')

ui.run()

NiceGUI

NiceGUI auf GitHub

See more…

Chat Message

Based on Quasar’s Chat Message component.

text:	the message body (can be a list of strings for multiple message parts)
name:	the name of the message author
label:	renders a label header/section only
stamp:	timestamp of the message
avatar:	URL to an avatar
sent:	render as a sent message (so from current user) (default: False)
text_html:	render text as HTML (default: False)

main.py

from nicegui import ui

ui.chat_message('Hello NiceGUI!',
                name='Robot',
                stamp='now',
                avatar='https://robohash.org/ui')

ui.run()

NiceGUI

Robot

Hello NiceGUI!

now

See more…

Generic Element

This class is the base class for all other UI elements. But you can use it to create elements with arbitrary HTML tags.

tag:	HTML tag of the element
_client:	client for this element (for internal use only)

main.py

from nicegui import ui

with ui.element('div').classes('p-2 bg-blue-100'):
    ui.label('inside a colored div')

ui.run()

NiceGUI

inside a colored div

See more…

Markdown Element

Renders Markdown onto the page.

content:	the Markdown content to be displayed
extras:	list of markdown2 extensions (default: [‚fenced-code-blocks‘, ‚tables‘])

main.py

from nicegui import ui

ui.markdown('This is **Markdown**.')

ui.run()

NiceGUI

This is Markdown.

See more…

ReStructuredText

Renders ReStructuredText onto the page.

content:	the ReStructuredText content to be displayed

main.py

from nicegui import ui

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

ui.run()

NiceGUI

This is reStructuredText.

See more…

Mermaid Diagrams

Renders diagrams and charts written in the Markdown-inspired Mermaid language. The mermaid syntax can also be used inside Markdown elements by providing the extension string ‚mermaid‘ to the ui.markdown element.

The optional configuration dictionary is passed directly to mermaid before the first diagram is rendered. This can be used to set such options as

{’securityLevel‘: ‚loose‘, …}

– allow running JavaScript when a node is clicked{‚logLevel‘: ‚info‘, …}

– log debug info to the console

Refer to the Mermaid documentation for the mermaid.initialize() method for a full list of options.

content:	the Mermaid content to be displayed
config:	configuration dictionary to be passed to mermaid.initialize()

main.py

from nicegui import ui

ui.mermaid('''
graph LR;
    A --> B;
    A --> C;
''')

ui.run()

NiceGUI

A

B

C

See more…

HTML Element

Rendert beliebigen HTML-Code auf die Seite, umhüllt von dem angegebenen Tag. Tailwind kann für das Styling verwendet werden. Sie können auch ui.add_head_html verwenden, um HTML-Code in den Kopf des Dokuments einzufügen und ui.add_body_html , um ihn in den Körper einzufügen.

Inhalt:	der anzuzeigende HTML-Code
Tag:	das HTML-Tag, in das der Inhalt eingebettet wird (Standard: „div“)

main.py

from nicegui import ui

ui.html('This is <strong>HTML</strong>.')

ui.run()

NiceGUI

Dies ist HTML.

Siehe mehr…

Other HTML Elements

Es gibt auch ein html Modul, mit dem Sie andere HTML-Elemente wie <span>, <div>, <p>, usw. einfügen können. Es ist gleichbedeutend mit der Verwendung der Methode ui.element mit dem Argument tag.

Wie bei jedem anderen Element können Sie Klassen, Stile, Requisiten, Tooltips und Ereignisse hinzufügen. Ein Vorteil ist, dass die Schlüsselwortargumente automatisch zum Requisiten-Wörterbuch des Elements hinzugefügt werden.

Hinzugefügt in Version 2.5.0

main.py

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

NiceGUIDas ist kühn.

---

Dies ist kursiv.