ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Weitere Werkzeuge

Html Embed

rx.html

Offizielle Doku

Werkstattauftrag

Zeig die Filialhinweise, die als HTML-Schnipsel aus dem System der Zentrale kommen, unverändert, aber trotzdem ansprechend an.

rx.html nimmt einen String mit HTML-Code und rendert ihn unverändert. Du nimmst es für Schnipsel, die anderswo (CMS, E-Mail-Text, Markdown-Konverter) schon als HTML entstanden sind. Baust du eine Oberfläche selbst, empfiehlt auch die offizielle Doku eher rx.el.*-Elemente als rx.html, weil sich daran Events und State hängen lassen.

Hello from raw HTML.

rx.html("<p>Hello from <b>raw</b> <i>HTML</i>.</p>")

Props ausprobieren

rx.html erzeugt ein einzelnes <div> und setzt das HTML hinein. Stile wie font_size oder color landen deshalb am äußeren div und werden vom Text darin geerbt.

Props ausprobieren

Bold and italic

snippet

size

color

rx.html("<b>Bold</b> and <i>italic</i>", font_size="18px", color="inherit")

Ändere den HTML-Schnipsel und den Stil des äußeren div. Dass die Aufzählungszeichen von ul fehlen, liegt am preflight dieser Website.

Prop	Werte	Standard	Verwendung
Erstes Kind	HTML-String oder String-Var	erforderlich	Das zu rendernde HTML. Genau eines
`class_name`	Klassen-String	`"rx-Html"` ist immer dabei	Klasse des äußeren `div`
Stil-Props · `style`	CSS, verschachtelte Selektoren wie `"& h2"`	keiner	Stile für das äußere `div` und die Elemente darin
`dangerouslySetInnerHTML`	`{"__html": ...}`	automatisch aus dem Kind	Interne Umsetzung. Musst du nie selbst setzen
Gemeinsame Attribute	`id` `title` `role` …	keiner	HTML-Attribute des `div`

Fünf Überschriften, ein Aussehen

Das Beispiel aus der offiziellen Doku. Auf dieser Website erscheinen alle fünf Überschriften gleich groß, weil Radix und Tailwind die Standardstile von Überschriften entfernt haben.

Hello World

rx.vstack(
    rx.html("<h2>Hello World</h2>"),
    rx.html("<h3>Hello World</h3>"),
    rx.html("<h4>Hello World</h4>"),
    rx.html("<h5>Hello World</h5>"),
    rx.html("<h6>Hello World</h6>"),
)

Wenn die Stile verschwunden sind

Die offizielle Doku empfiehlt class_name="prose" mit dem Tailwind-Plugin @tailwindcss/typography. Diese Website hat das Plugin nicht, daher steht es nur als Code da.

# The official docs' way: the prose class from the Tailwind typography plugin
rx.html("<h2>Hello World</h2>", class_name="prose")
# + enable the @tailwindcss/typography plugin in rxconfig.py's Tailwind settings (not on this site)

Auch ohne Plugin kannst du über verschachtelte Selektoren wie "& h2" in style jedem Element im inneren HTML einen Stil geben.

Hello World

rx.html(
    "<h2>Hello World</h2><h3>Hello World</h3><h4>Hello World</h4>",
    style={
        "& h2": {"font_size": "24px", "font_weight": "bold"},
        "& h3": {"font_size": "20px", "font_weight": "bold"},
        "& h4": {"font_size": "16px", "font_weight": "600", "color": rx.color("gray", 11)},
    },
)

Bilder einfügen

Auch <img>-Tags gehen unverändert hinein. Die offizielle Doku nutzt das Reflex-Bannerbild, dieser Kurs verwendet für externe Ressourcen einheitlich picsum-Bilder.

rx.html(
    "<img src='https://picsum.photos/id/1039/400/160' alt='A waterfall' style='border-radius: 8px' />"
)

HTML aus dem State und Escaping

Gibst du eine String-Var als Kind, ändert sich das HTML bei jeder State-Änderung mit. Dann darfst du Nutzereingaben nicht unverändert einsetzen. Wandelst du < und > mit html.escape um, erscheinen Tags als Text statt als Markup. Prüf unten, dass  im Eingabefeld nicht fett wird, sondern als Text sichtbar bleibt. <script>-Tags, die rx.html einsetzt, führt der Browser auch ohne Escaping nicht aus, Attribute wie onerror aber schon, deshalb ist Escaping nötig.

Welcome, Ada!

Welcome, Ada!

import html


class HtmlEmbedPreviewState(rx.State):
    name: str = "<b>Ada</b>"

    @rx.event
    def change_name(self, value: str):
        self.name = value

    @rx.var
    def card_html(self) -> str:
        safe = html.escape(self.name)
        return f"<p>Welcome, <mark>{safe}</mark>!</p>"


rx.vstack(
    rx.input(value=HtmlEmbedPreviewState.name, on_change=HtmlEmbedPreviewState.change_name, width="100%"),
    rx.html(HtmlEmbedPreviewState.card_html),
    rx.code(HtmlEmbedPreviewState.card_html, size="1"),
    width="100%",
    max_width="420px",
)

Mit rx.el geschrieben

Kannst du den Inhalt selbst bauen, ist dieselbe Ansicht mit rx.el-Elementen besser. Jedes Element kann on_click und State bekommen, und ums Escaping kümmert sich Reflex.

Hello from raw HTML.

Hello from rx.el elements.

rx.flex(
    rx.html("<p>Hello from <b>raw</b> <i>HTML</i>.</p>"),
    rx.el.p("Hello from ", rx.el.b("rx.el"), " ", rx.el.i("elements"), "."),
    direction="column",
    spacing="2",
)

Auftrag erledigt

Am Hinweis-HTML ist kein Zeichen geändert; von außen setzen nur die Selektoren "& h3", "& ul" und "& a" Überschriftgröße, Aufzählungszeichen und Linkfarbe.

Store hours change

From Nov 1 we open at 8 am.

Mon to Fri: 8 am - 8 pm
Sat: 9 am - 5 pm

rx.card(
    rx.html(
        "<h3>Store hours change</h3>"
        "<p>From <b>Nov 1</b> we open at <mark>8 am</mark>.</p>"
        "<ul><li>Mon to Fri: 8 am - 8 pm</li><li>Sat: 9 am - 5 pm</li></ul>"
        "<p><a href='https://reflex.dev/docs/library/other/html-embed/' target='_blank'>Read more</a></p>",
        style={
            "& h3": {"font_size": "18px", "font_weight": "bold", "margin_bottom": "6px"},
            "& ul": {"list_style_type": "disc", "padding_left": "1.4em", "margin_y": "6px"},
            "& a": {"color": rx.color("indigo", 11), "text_decoration": "underline"},
        },
    ),
    max_width="420px",
)

Werkstattnotizen

rx.html("...") setzt einen HTML-String unverändert in ein einzelnes div. Genau ein Kind.
Für selbst gebaute Oberflächen sind rx.el.*-Elemente besser. rx.html ist für Schnipsel, die schon HTML sind.
Standardstile von Überschriften · Listen sind entfernt. Per prose-Klasse oder verschachtelten Selektoren wie "& h2" setzen.
Nutzereingaben vor dem Einsetzen mit html.escape escapen.

← Zurück

Weitere Werkzeuge · Clipboard

Weiter →

Weitere Werkzeuge · Script

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex