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

HTML Media

rx.el.arearx.el.audiorx.el.canvasrx.el.embedrx.el.iframerx.el.imgrx.el.mathrx.el.metarx.el.objectrx.el.picturerx.el.sourcerx.el.trackrx.el.video

Offizielle Doku

Werkstattauftrag

Produktdetailseite: Bitte bau ein großes Foto (auf schmalen Bildschirmen ein quadratisches), ein Anwendungsvideo und eine Hörprobe nur mit HTML-Medienelementen ein.

Diese HTML-Elemente bringen Bilder, Videos, Töne und andere Dokumente auf die Seite. Am häufigsten sind img·video·audio; mit picture·source wählst du die passende Datei für den Bildschirm, mit iframe·embed·object bettest du andere Dokumente ein. Sie sind einfacher als Reflex' rx.image, rx.video und rx.audio und nutzen direkt die eingebauten Funktionen des Browsers.

rx.el.img(src="https://picsum.photos/id/1025/300/200", alt="A dog in a blanket", width="300px", height="200px")

Props ausprobieren

Bei img änderst du, wie sich das Bild in die Box einpasst (object_fit), und CSS-Filter; bei video die Steuerleiste (controls), Wiederholung und Stummschaltung.

A city street — object_fit: cover beschneidet und füllt, contain verkleinert, bis alles sichtbar ist, fill dehnt ohne Rücksicht aufs Seitenverhältnis.

Props ausprobieren

controls

loop

muted

width

rx.el.video(
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
    poster="https://picsum.photos/id/152/320/180",
    controls=True,
    loop=False,
    muted=True,
    plays_inline=True,
    width="280px",
)

Ohne controls verschwindet die Wiedergabeleiste. poster ist das Bild, das vor dem Abspielen erscheint.

Prop	Werte	Standard	Verwendung
`src` `alt` (img)	URL / String	keiner	Bildadresse und Alternativtext. `alt` immer angeben
`src_set` `sizes` (img, source)	Kandidatenliste	keiner	Datei passend zu Pixeldichte · Breite wählen
`loading` (img, iframe)	`"lazy"` `"eager"`	`"eager"`	Erst laden, wenn es in die Nähe des sichtbaren Bereichs kommt
`decoding` (img)	`"async"` `"sync"` `"auto"`	`"auto"`	Zeitpunkt des Dekodierens
`controls` `loop` `muted` `auto_play` (video, audio)	`True` / `False`	`False`	Steuerleiste, Wiederholung, stumm, Autoplay
`poster` `plays_inline` (video)	URL / bool	keiner	Bild vor dem Abspielen; auf Mobilgeräten ohne Vollbild abspielen
`preload` (video, audio)	`"none"` `"metadata"` `"auto"`	je nach Browser	Wie viel vorab geladen wird
`media` `type` (source)	Media Query / MIME	keiner	Bedingung und Dateiformat
`kind` `src_lang` `label` `default` (track)	String · bool	keiner	Untertiteldatei
`src_doc` `sandbox` `allow` (iframe)	HTML / Rechteliste	keiner	Einzubettendes Dokument und Einschränkungen
`shape` `coords` `href` (area)	`"rect"` `"circle"` `"poly"` …	keiner	Klickbereich einer Imagemap

img: Alternativtext und Auflösungskandidaten

alt erscheint, wenn das Bild nicht geladen werden kann, und wird von Screenreadern vorgelesen. Das rechte Bild hat absichtlich eine Adresse, die es auf dieser Website nicht gibt, daher sieht man alt. Gibst du in src_set Kandidaten für 1x·2x an, wählt ein hochauflösender Bildschirm die größere Datei. loading="lazy" verschiebt das Laden, bis das Bild in die Nähe des sichtbaren Bereichs kommt.

rx.el.div(
    rx.el.img(
        src="https://picsum.photos/id/1025/150/100",
        src_set="https://picsum.photos/id/1025/150/100 1x, https://picsum.photos/id/1025/300/200 2x",
        alt="Sharp on high density screens",
        loading="lazy",
        decoding="async",
    ),
    rx.el.img(src="/no-such-image.png", alt="Broken image: the alt text shows"),
    display="flex",
    gap="12px",
    align_items="center",
)

picture und source: das passende Bild für den Bildschirm

Die source-Elemente in picture werden von oben geprüft, und die erste Datei mit passender media-Bedingung wird verwendet. Passt keine, gilt das letzte img. Machst du das Fenster schmaler als 640px, wechselt es zum quadratischen Foto.

rx.el.picture(
    rx.el.source(media="(max-width: 640px)", src_set="https://picsum.photos/id/1015/300/300"),
    rx.el.img(src="https://picsum.photos/id/1016/480/200", alt="A landscape", max_width="100%"),
)

video, audio, source, track

Du kannst src direkt angeben oder mehrere Dateien unterschiedlicher Formate als source-Kinder. Der Browser nimmt die erste source, die er abspielen kann. Text nach den source-Elementen erscheint nur in Browsern, die das Video nicht abspielen können. Autoplay (auto_play) erlauben die meisten Browser nur mit muted.

rx.el.div(
    rx.el.video(
        rx.el.source(src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4", type="video/mp4"),
        "Your browser cannot play this video.",
        controls=True,
        muted=True,
        preload="metadata",
        width="280px",
    ),
    rx.el.audio(
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
        controls=True,
        preload="none",
    ),
    display="flex",
    flex_direction="column",
    gap="12px",
)

track hängt eine WebVTT-Untertiteldatei (.vtt) an. Dafür braucht es eine Untertiteldatei von derselben Website, daher steht es hier nur als Code. Die Datei kommt in den Ordner assets.

rx.el.video(
    rx.el.source(src="/flower.mp4", type="video/mp4"),
    rx.el.track(src="/flower.en.vtt", kind="subtitles", src_lang="en", label="English", default=True),
    controls=True,
)

iframe: eine Seite in der Seite

Gib in src die Adresse einer anderen Seite an oder direkt HTML in src_doc. sandbox="" sperrt Skripte, Formulare und Pop-ups des eingebetteten Dokuments komplett; nur was nötig ist, gibst du etwa mit "allow-scripts" frei. title sagt Screenreadern, was darin steckt. Viele fremde Websites verbieten das Einbetten.

rx.el.iframe(
    src_doc="<h3 style='font-family:sans-serif'>Hello from an iframe</h3><p style='font-family:sans-serif'>This page lives in src_doc.</p>",
    sandbox="",
    loading="lazy",
    title="Inline document",
    width="320px",
    height="130px",
    border="1px solid gray",
    border_radius="6px",
)

embed und object

Beides sind ältere Wege, externe Ressourcen einzubinden. embed nimmt nur src und type, object nimmt data und zeigt bei Ladefehlern stattdessen seine Kinder. Heute nimmst du besser img für Bilder, video für Videos und iframe für Dokumente.

rx.el.div(
    rx.el.embed(src="https://picsum.photos/id/237/160/110", type="image/jpeg", width="160px", height="110px"),
    rx.el.object(
        "Fallback text if the data cannot load",
        data="https://picsum.photos/id/40/160/110",
        type="image/jpeg",
        width="160px",
        height="110px",
    ),
    display="flex",
    gap="12px",
)

canvas: die Zeichenfläche

canvas ist eine leere Zeichenfläche, gezeichnet wird mit JavaScript. Unten zeichnet rx.call_script in on_mount ein Rechteck und einen Kreis. width·height von canvas sind keine CSS-Größen, sondern die Pixelzahl der Zeichenfläche, deshalb übergibst du sie in Reflex per custom_attrs (als Schlüsselwortargument würden sie zu CSS).

rx.el.canvas(
    id="htmlmedia_canvas",
    custom_attrs={"width": "260", "height": "100"},
    border="1px solid gray",
    border_radius="6px",
    on_mount=rx.call_script(
        "const g = document.getElementById('htmlmedia_canvas').getContext('2d');"
        " g.fillStyle = '#6e56cf'; g.fillRect(20, 20, 120, 60);"
        " g.fillStyle = '#e54d2e'; g.beginPath(); g.arc(200, 50, 30, 0, Math.PI * 2); g.fill();"
    ),
)

area: Imagemap

Die area-Elemente in map sind Klickbereiche auf einem Bild. Verknüpft wird, indem du in use_map des img "#Kartenname" einträgst. Die linke Hälfte des Fotos und der Kreis rechts führen jeweils zu einem anderen Dokument.

rx.el.div(
    rx.el.map(
        rx.el.area(shape="rect", coords="0,0,150,200", href="https://reflex.dev/docs/library/", target="_blank", alt="Library docs"),
        rx.el.area(shape="circle", coords="225,100,60", href="https://reflex.dev/docs/library/html/media/", target="_blank", alt="Media docs"),
        name="htmlmedia-map",
    ),
    rx.el.img(src="https://picsum.photos/id/1060/300/200", alt="Image map", use_map="#htmlmedia-map", width="300px", height="200px"),
)

math und meta

rx.el.math ist ein Behälter für Formeln (MathML), aber Tags wie mi·mo·msup, die hinein gehören, gibt es in rx.el nicht. Formeln setzt du einfacher mit rx.html als komplettes MathML ein. meta sind Informationen im Dokumentkopf. React 19 hebt meta aus dem Body in den Kopf, deshalb renderst du es nicht auf der Seite, sondern gibst es normalerweise über das Argument meta von @rx.page an.

a^{2} + b^{2} = c^{2}

rx.html("<math display='block'><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></math>")

rx.el.math(...)   # MathML box; rx.el has no mi/mo/mn tags to put inside it
rx.el.meta(name="description", content="A page about media")   # for the document head

@rx.page(title="Media", description="A page about media", meta=[{"name": "theme-color", "content": "#6e56cf"}])
def media_page(): ...

Auftrag erledigt

Das Foto passt sich per picture dem Bildschirm an, das Video lädt dank poster und preload="none" erst beim Klick, und für den Ton gibt es die Standardleiste von audio.

See it in action

Sound preview

rx.el.div(
    rx.el.picture(
        rx.el.source(media="(max-width: 640px)", src_set="https://picsum.photos/id/26/320/320"),
        rx.el.img(src="https://picsum.photos/id/26/440/240", alt="Travel kit on a table", border_radius="8px", max_width="100%"),
    ),
    rx.el.p("See it in action", font_weight="600", margin_top="8px"),
    rx.el.video(
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
        poster="https://picsum.photos/id/26/440/248",
        controls=True,
        muted=True,
        plays_inline=True,
        preload="none",
        width="100%",
    ),
    rx.el.p("Sound preview", font_weight="600", margin_top="8px"),
    rx.el.audio(src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", controls=True, preload="none"),
    max_width="440px",
)

Werkstattnotizen

img immer mit alt. Mit src_set · loading="lazy" die passende Datei spät laden.
picture + source(media) für bildschirmabhängige Bilder, am Ende ein img.
video · audio bekommen per controls eine Leiste, Autoplay nur zusammen mit muted. Untertitel per track.
iframe mit src oder src_doc, Einschränkungen per sandbox. embed · object sind ältere Wege.
canvas-Größe per custom_attrs, gezeichnet wird mit JavaScript. meta über @rx.page(meta=...).

← Zurück

HTML-Elemente · HTML Forms

Weiter →

HTML-Elemente · HTML Tables

Ü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