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

HTML-Elemente

SVG

rx.el.svgrx.el.svg.circlerx.el.svg.defsrx.el.svg.linear_gradientrx.el.svg.polygonrx.el.svg.pathrx.el.svg.rectrx.el.svg.stop

Offizielle Doku

Werkstattauftrag

Ein Verifizierungs-Badge: Bitte zeichne ohne Bilddatei, nur mit Code, einen Stern auf einem Kreis mit Farbverlauf und darüber ein Häkchen.

SVG ist Vektorgrafik, die über Koordinaten gezeichnet wird. Sie bleibt bei jeder Vergrößerung scharf, und Form und Farbe lassen sich per Code ändern. rx.el.svg ist die Zeichenfläche, und die Formen darin liegen im Namensraum rx.el.svg, etwa rx.el.svg.circle oder rx.el.svg.rect.

rx.el.svg(
    rx.el.svg.circle(cx=50, cy=50, r=40, fill=rx.color("indigo", 9)),
    view_box="0 0 100 100",
    width="100",
    height="100",
)

Props ausprobieren

Formen bekommen ihre Gestalt über Positions- und Größenattribute, ihre Farbe über fill (Füllung) und stroke (Linie). Die Werte sind Zahlen im Koordinatensystem von view_box.

Props ausprobieren

rect_width

corner

radius

fill

stroke

stroke_width

rx.el.svg(
    rx.el.svg.rect(
        x="10",
        y="10",
        width="100",
        height="80",
        rx="10",
        fill="#6e56cf",
        stroke="none",
        stroke_width="4",
    ),
    rx.el.svg.circle(cx="160", cy="50", r="35", fill="#6e56cf", fill_opacity="0.6", stroke="none", stroke_width="4"),
    view_box="0 0 220 100",
    width="264",
    height="120",
)

rx bei rect ist die Eckenrundung, r bei circle der Radius. Mit fill auf none bleibt nur die Linie.

Prop	Werte	Standard	Verwendung
`view_box` `width` `height` (svg)	`"0 0 100 100"` / Länge	keiner	Koordinatensystem der Grafik und Größe auf dem Bildschirm
`preserve_aspect_ratio` (svg)	`"xMidYMid meet"` `"none"` …	`"xMidYMid meet"`	Anpassung bei abweichendem Seitenverhältnis
`cx` `cy` `r` (circle)	Zahl	`0`	Mittelpunkt und Radius
`x` `y` `width` `height` `rx` `ry` (rect)	Zahl	`0`	Position, Größe, Ecken. Nur `rx` gesetzt heißt `ry` gleich
`points` (polygon)	`"x,y x,y …"`	keiner	Eckpunkte. Der Endpunkt wird automatisch geschlossen
`d` (path)	Pfadbefehle	keiner	`M` bewegen, `L` Gerade, `Q`·`C` Kurven, `Z` schließen
`path_length` (alle Formen)	Zahl	tatsächliche Länge	Linienlänge gilt als dieser Wert (für Strichmuster)
`id` `x1` `y1` `x2` `y2` (linear_gradient)	String · Zahl	links→rechts	Name und Richtung des Verlaufs
`gradient_units` `gradient_transform` `spread_method` `href` (linear_gradient)	String	keiner	Koordinatenbasis, Transformation, Randverhalten, Erben von einem anderen Verlauf
`offset` `stop_color` `stop_opacity` (stop)	`"0%"`–`"100%"` / Farbe / 0–1	keiner	Position und Farbe eines Farbstopps
`fill` `stroke` `stroke_width` …	Farbe · Zahl	schwarze Füllung	Keine eigenen Attribute der Formen, sondern CSS (siehe unten)

Zeichenfläche: svg und view_box

view_box="0 0 100 100" heißt „innen ist das Koordinatensystem 100 breit und 100 hoch“, width·height sind die Größe auf dem Bildschirm. Dieselbe Grafik bleibt auch in anderer Größe gestochen scharf. Bei abweichendem Seitenverhältnis wird standardmäßig zentriert verkleinert, mit preserve_aspect_ratio="none" gedehnt, bis die Fläche gefüllt ist (drittes Bild).

rx.el.div(
    rx.el.svg(
        rx.el.svg.rect(x=0, y=0, width=100, height=100, fill=rx.color("gray", 4)),
        rx.el.svg.circle(cx=50, cy=50, r=30, fill=rx.color("tomato", 9)),
        view_box="0 0 100 100",
        width="60",
        height="60",
    ),
    rx.el.svg(
        rx.el.svg.rect(x=0, y=0, width=100, height=100, fill=rx.color("gray", 4)),
        rx.el.svg.circle(cx=50, cy=50, r=30, fill=rx.color("tomato", 9)),
        view_box="0 0 100 100",
        width="120",
        height="120",
    ),
    rx.el.svg(
        rx.el.svg.rect(x=0, y=0, width=100, height=100, fill=rx.color("gray", 4)),
        rx.el.svg.circle(cx=50, cy=50, r=30, fill=rx.color("tomato", 9)),
        view_box="0 0 100 100",
        preserve_aspect_ratio="none",
        width="200",
        height="80",
    ),
    display="flex",
    gap="16px",
    align_items="end",
)

Grundformen

rect, circle und polygon sind die Formen aus der offiziellen Doku; Reflex 0.10 enthält zusätzlich Elemente wie ellipse, line, polyline, g und text. In 0.10 stehen fill·stroke·stroke_width nicht in der Attributliste der Formen und werden als CSS übergeben. SVG-Farbattribute wirken als CSS genauso, das Ergebnis ist also gleich, und Theme-Farben wie rx.color(...) funktionieren auch.

rx.el.svg(
    rx.el.svg.rect(x=10, y=20, width=60, height=60, rx=12, fill=rx.color("teal", 9)),
    rx.el.svg.circle(cx=120, cy=50, r=30, fill=rx.color("amber", 9)),
    rx.el.svg.polygon(points="200,20 230,80 170,80", fill=rx.color("crimson", 9)),
    rx.el.svg.ellipse(cx=290, cy=50, rx=40, ry=22, fill=rx.color("blue", 9)),
    rx.el.svg.line(x1=10, y1=95, x2=330, y2=95, stroke="gray", stroke_width=2),
    view_box="0 0 340 100",
    width="340",
    height="100",
)

path: freie Linien

In d reihst du Befehle aneinander. M10 80 setzt den Stift ab, Q ist eine quadratische Kurve, T setzt die vorige Kurve glatt fort. Für reine Linien nimmst du fill="none". path_length=100 lässt die Länge als 100 gelten, damit sich Strichmuster wie stroke_dasharray="10 5" leicht anteilig berechnen lassen.

rx.el.svg(
    rx.el.svg.path(
        d="M10 80 Q 55 10, 100 80 T 190 80",
        fill="none",
        stroke=rx.color("indigo", 9),
        stroke_width=4,
    ),
    rx.el.svg.path(
        d="M10 95 L 190 95",
        path_length=100,
        stroke="gray",
        stroke_width=3,
        stroke_dasharray="10 5",
    ),
    view_box="0 0 200 100",
    width="300",
    height="150",
)

Farbverlauf: defs, linear_gradient, stop

Was in defs steht, wird nicht direkt gezeichnet, sondern ist Material, das per Namen (id) abgerufen wird. x1·y1→x2·y2 von linear_gradient geben die Richtung an, stop die Positionen der Farben. Gibst du dem fill einer Form "url(#id)", wird sie mit dem Verlauf gefüllt. Vergib die id so, dass sie auf der Seite eindeutig ist.

rx.el.svg(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="0%", stop_color="#6e56cf"),
            rx.el.svg.stop(offset="100%", stop_color="#e54d2e", stop_opacity="0.8"),
            id="htmlsvg_sunset",
            x1="0",
            y1="0",
            x2="1",
            y2="1",
        ),
    ),
    rx.el.svg.rect(x=0, y=0, width=200, height=100, rx=16, fill="url(#htmlsvg_sunset)"),
    view_box="0 0 200 100",
    width="240",
    height="120",
)

Zeichnen mit dem State

Setzt du State-Werte in die Attribute einer Form, folgt die Grafik den Daten. Das x der Balken wird hier aus dem zweiten Argument (Index) von rx.foreach berechnet.

import random


class HtmlSvgBarState(rx.State):
    values: list[int] = [40, 75, 55, 90, 30]

    @rx.event
    def shuffle(self):
        self.values = [random.randint(10, 95) for _ in self.values]


rx.el.div(
    rx.el.svg(
        rx.foreach(
            HtmlSvgBarState.values,
            lambda v, i: rx.el.svg.rect(x=i * 40 + 10, y=100 - v, width=28, height=v, rx=4, fill=rx.color("grass", 9)),
        ),
        view_box="0 0 210 100",
        width="210",
        height="100",
    ),
    rx.el.button("Shuffle", on_click=HtmlSvgBarState.shuffle, padding="4px 12px", border="1px solid gray", border_radius="6px", margin_top="8px"),
)

Auftrag erledigt

Der Kreis ist mit dem Verlauf aus defs gefüllt, der Stern ist ein polygon mit 10 Eckpunkten, und obendrauf sitzt das Häkchen als path mit abgerundeten Enden.

rx.el.svg(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="0%", stop_color="#3e63dd"),
            rx.el.svg.stop(offset="100%", stop_color="#12a594"),
            id="htmlsvg_badge",
            x1="0",
            y1="0",
            x2="0",
            y2="1",
        ),
    ),
    rx.el.svg.circle(cx=60, cy=60, r=56, fill="url(#htmlsvg_badge)"),
    rx.el.svg.polygon(points="60,18 70,44 98,46 76,63 84,90 60,75 36,90 44,63 22,46 50,44", fill="#ffd60a"),
    rx.el.svg.path(d="M44 62 L56 74 L78 50", fill="none", stroke="white", stroke_width=6, stroke_linecap="round", stroke_linejoin="round"),
    view_box="0 0 120 120",
    width="120",
    height="120",
)

Werkstattnotizen

rx.el.svg ist die Zeichenfläche: view_box für die inneren Koordinaten, width · height für die Bildschirmgröße.
Formen sind rx.el.svg.rect · circle · polygon · path, in 0.10 auch ellipse · line · g · text.
fill · stroke gehen in 0.10 als CSS hinein, das Ergebnis ist gleich. Theme-Farben per rx.color gehen auch.
Verlauf: defs > linear_gradient(id) > stop, verwendet mit fill="url(#id)".
State-Werte in Attributen plus Formen per rx.foreach ergeben Datengrafiken.

← Zurück

HTML-Elemente · HTML Tables

Weiter →

Weitere Werkzeuge · Theme

Ü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