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

Typografie

Link

rx.linkrx.redirect

Offizielle Doku

Werkstattauftrag

Bitte in den Footer ganz unten auf der Website zwei Links zu Seiten innerhalb der Website und einen externen Link, der sich in einem neuen Tab öffnet.

rx.link ist Text, der beim Anklicken woandershin führt. In href steht das Ziel: eine externe Adresse (https://…), ein Pfad innerhalb dieser App (/courses) oder eine Stelle auf derselben Seite (#id).

Reflex Home Page.

rx.link("Reflex Home Page.", href="https://reflex.dev/")

Props ausprobieren

Ein Link hat ähnliche Text-Props wie rx.text, dazu underline. Mit is_external öffnet er sich in einem neuen Tab.

Props ausprobieren

Visit Reflex

label

underline

size

weight

trim

color

high_contrast

is_external

rx.link("Visit Reflex", href="https://reflex.dev/", underline="auto", size="3", weight="regular", trim="normal", color_scheme="indigo", high_contrast=False, is_external=True)

underline bestimmt, wann die Unterstreichung sichtbar ist. Bei auto entscheidet Radix je nach Situation, meist erscheint sie beim Darüberfahren mit der Maus.

Prop	Werte	Standard	Verwendung
`href`	Adresse als Zeichenkette	keiner	Ziel: externe Adresse, Pfad in der App, `#id`
`is_external`	`True` / `False`	`False`	In neuem Tab öffnen (`target="_blank"`)
`underline`	`"auto"` `"hover"` `"always"` `"none"`	`"auto"`	Wann die Unterstreichung sichtbar ist
`size`	`"1"` bis `"9"`	geerbt	Schriftgröße
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	geerbt	Schriftstärke
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	Zeilenabstand oben und unten abschneiden
`color_scheme`	Radix-Farbname	Themenfarbe	Textfarbe
`high_contrast`	`True` / `False`	`False`	Stärkerer Kontrast zum Hintergrund
`target`	`"_self"` `"_blank"` `"_parent"` `"_top"`	keiner	Wo das Ziel geöffnet wird, direkt angegeben
`rel`	Zeichenkette	keiner	Linkbeziehung (`"nofollow"`, `"noopener"` …)
`download`	`True` oder Dateiname	keiner	Nicht navigieren, sondern als Datei herunterladen
`referrer_policy` · `href_lang` · `media` · `ping`	Attribute von HTML-`<a>`	keiner	Werden unverändert an `<a>` weitergegeben

An Events gibt es nur die Standard-Events wie on_click.

Zu einer anderen Seite der App

Beginnt href mit /, ist es ein Pfad dieser App. Die volle Adresse brauchst du nicht, und Reflex lädt die Seite nicht neu, sondern tauscht nur die Anzeige aus (clientseitige Navigation). Deshalb geht der Wechsel schneller als bei einem externen Link.

Home Courses

rx.flex(
    rx.link("Home", href="/"),
    rx.link("Courses", href="/courses"),
    spacing="4",
)

Andere Komponenten umschließen

Gibst du statt Text einen Button oder eine Karte als Kind, wird die ganze Komponente zum Link. Bei großen Blöcken wie Karten entfernst du die Unterstreichung meist mit underline="none".

Reflex docs

Open the official docs

rx.flex(
    rx.link(rx.button("Example"), href="https://reflex.dev/"),
    rx.link(
        rx.card(rx.text("Reflex docs", weight="bold"), rx.text("Open the official docs", size="2", color_scheme="gray")),
        href="https://reflex.dev/docs/",
        is_external=True,
        underline="none",
    ),
    spacing="4",
    align="center",
    wrap="wrap",
)

Anker: zu einer Stelle auf der Seite

Bekommt eine Komponente id="lib-link-footer", scrollt ein Link mit href="#lib-link-footer" zu dieser Stelle. Liegt die Stelle auf einer anderen Seite, hängst du # und die id an den Pfad an, etwa "/courses/some-page#lib-link-footer". Ein Klick auf den Link unten bringt dich zum Beispiel unter „Auftrag erledigt“ am Ende dieser Seite.

Jump to the footer below

rx.link("Jump to the footer below", href="#lib-link-footer")

Unterstreichung, Größe, Farbe

Vergleiche die vier Werte von underline. Bei hover erscheint die Unterstreichung erst beim Darüberfahren mit der Maus, und auto verhält sich meist genauso. Größe, Stärke, Farbe, Kontrast und trim funktionieren wie bei rx.text.

underline auto underline hover underline always underline none

rx.flex(
    rx.link("underline auto", href="#", underline="auto"),
    rx.link("underline hover", href="#", underline="hover"),
    rx.link("underline always", href="#", underline="always"),
    rx.link("underline none", href="#", underline="none"),
    direction="column",
    spacing="3",
)

Size 2, regular Size 4, medium Size 6, bold crimson high contrast With Trim

rx.flex(
    rx.link("Size 2, regular", href="#", size="2"),
    rx.link("Size 4, medium", href="#", size="4", weight="medium"),
    rx.link("Size 6, bold", href="#", size="6", weight="bold"),
    rx.link("crimson", href="#", color_scheme="crimson"),
    rx.link("high contrast", href="#", high_contrast=True),
    rx.link(
        "With Trim",
        href="#",
        trim="both",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

Aus dem State navigieren: rx.redirect

Soll ein Event-Handler erst seine Arbeit erledigen und dann die Seite wechseln, etwa nach dem Speichern, gibst du statt eines Links rx.redirect("pfad") zurück. Der Button unten führt zur Startseite.

class LinkRedirectState(rx.State):
    @rx.event
    def go_home(self):
        return rx.redirect("/")


rx.button(rx.icon("house"), "Save and go home", on_click=LinkRedirectState.go_home)

Auftrag erledigt

Interne Links bekommen href="/…", der externe Link öffnet sich mit is_external=True in einem neuen Tab. Footer-Links nimmst du mit Grau und underline="hover" zurück. Dieser Footer hat id="lib-link-footer", deshalb landet der Ankerlink von oben hier.

rx.flex(
    rx.text("Shop", weight="bold", size="2"),
    rx.link("Home", href="/", size="2", color_scheme="gray", underline="hover"),
    rx.link("Courses", href="/courses", size="2", color_scheme="gray", underline="hover"),
    rx.spacer(),
    rx.link("GitHub", rx.icon("external-link", size=14), href="https://github.com/reflex-dev/reflex", is_external=True, size="2",
            color_scheme="gray", underline="hover", display="flex", align_items="center", gap="4px"),
    id="lib-link-footer",
    spacing="4",
    align="center",
    wrap="wrap",
    padding="12px 16px",
    border_top=f"1px solid {rx.color('gray', 6)}",
    width="100%",
)

Werkstattnotizen

rx.link("Text", href="…"). Externe Adressen, Pfade in der App (/…) und #id auf derselben Seite gehen alle.
Pfade in der App navigieren, ohne die Seite neu zu laden. Neuer Tab mit is_external=True.
underline: auto · hover · always · none. Die übrigen Text-Props sind wie bei rx.text.
Mit einem Button oder einer Karte als Kind wird das Ganze zum Link.
Navigation im Handler: return rx.redirect("/pfad").

← Zurück

Typografie · Heading

Weiter →

Typografie · Code

Ü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