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

Datenanzeige

Code Block

rx.code_blockrx.code_block.themes

Offizielle Doku

Werkstattauftrag

Setz auf die Installationsseite den „Installationsbefehl“ und den „Code der ersten App“ als farbig hervorgehobene Codekästen, jeweils mit Kopier-Button.

rx.code_block zeigt mehrzeiligen Code mit Syntaxhervorhebung passend zur Sprache. Als erstes Argument übergibst du einen String, der Zeilenumbrüche und Einrückung genau so enthält, und mit language nennst du die Sprache. Für kurzen Code innerhalb einer Zeile nimmst du rx.code. Auch alle Beispielcodes dieses Kurses werden mit rx.code_block angezeigt.

1
2
3
4
5
def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n - 1) + fib(n - 2)

rx.code_block(
    """def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n - 1) + fib(n - 2)""",
    language="python",
    show_line_numbers=True,
)

Props ausprobieren

Wechselst du die Sprache, wird derselbe Text anders eingefärbt. Du kannst auch eine eigene Codezeile in das Feld unten schreiben.

Props ausprobieren

1
SELECT name FROM users WHERE id = 1;

code

language

show_line_numbers

rx.code_block("SELECT name FROM users WHERE id = 1;", language="sql", show_line_numbers=True)

language legt die Hervorhebungsregeln fest. Mit show_line_numbers erscheinen links Zeilennummern.

Prop	Werte	Standard	Verwendung
Erstes Argument (`code`)	String	Pflicht	Anzuzeigender Code
`language`	`"python"` `"javascript"` `"sql"` `"bash"` …	`"python"`	Hervorhebungsregeln
`theme`	`rx.code_block.themes.…`	hell `one_light`, dunkel `one_dark`	Farbschema
`show_line_numbers`	`True` / `False`	`False`	Zeilennummern
`starting_line_number`	Ganzzahl	`1`	Nummer der ersten Zeile
`wrap_long_lines`	`True` / `False`	`False`	Lange Zeilen umbrechen
`can_copy`	`True` / `False`	`False`	Kopier-Button oben rechts
`copy_button`	Komponente	keiner	Button anstelle des Standard-Kopier-Buttons
`custom_style`	dict	keiner	Stil des Codekastens
`code_tag_props`	dict	keiner	Props für das innere `code`-Tag

Theme

theme bekommt einen Wert aus rx.code_block.themes. Strings wie "dracula" werden nicht akzeptiert. Ohne Angabe gilt im hellen Modus automatisch one_light, im dunklen one_dark.

print("Hello, world!")

rx.code_block(
    'print("Hello, world!")',
    language="python",
    theme=rx.code_block.themes.dracula,
)

Willst du das Theme je Modus selbst wählen, übergibst du rx.color_mode_cond die Werte für hell und dunkel.

print("Hello, world!")

rx.code_block(
    'print("Hello, world!")',
    language="python",
    theme=rx.color_mode_cond(
        light=rx.code_block.themes.one_light,
        dark=rx.code_block.themes.one_dark,
    ),
)

Soll ein String im State das Theme bestimmen, ordnest du ihn mit rx.match dem Theme-Wert zu, denn der String selbst lässt sich nicht übergeben. Daneben gibt es rund 40 weitere, etwa nord, vs_dark, ghcolors, night_owl und material_dark.

for i in range(3):
    print(i)

class CodeBlockThemeState(rx.State):
    theme_name: str = "dracula"

    @rx.event
    def set_code_block_theme(self, value: str):
        self.theme_name = value


rx.vstack(
    rx.select(["dracula", "nord", "vs_dark", "ghcolors"], value=CodeBlockThemeState.theme_name, on_change=CodeBlockThemeState.set_code_block_theme),
    rx.code_block(
        "for i in range(3):\n    print(i)",
        language="python",
        theme=rx.match(
            CodeBlockThemeState.theme_name,
            ("dracula", rx.code_block.themes.dracula),
            ("nord", rx.code_block.themes.nord),
            ("vs_dark", rx.code_block.themes.vs_dark),
            rx.code_block.themes.ghcolors,
        ),
        width="100%",
    ),
    width="100%",
)

Zeilennummern und lange Zeilen

starting_line_number legt die Nummer der ersten Zeile fest. So passen die Zeilennummern, wenn du nur einen Ausschnitt einer langen Datei zeigst. wrap_long_lines=True bricht Zeilen, die zur Seite überlaufen, in die nächste Zeile um.

10
11
12
13
total = 0
for price in [1200, 800, 450]:
    total += price
print(f"Total: {total} won, and this comment is long enough to show how wrapping works")

rx.code_block(
    """total = 0
for price in [1200, 800, 450]:
    total += price
print(f"Total: {total} won, and this comment is long enough to show how wrapping works")""",
    language="python",
    show_line_numbers=True,
    starting_line_number=10,
    wrap_long_lines=True,
)

Kopier-Button und Stil

Mit can_copy=True erscheint oben rechts ein Kopier-Button; ein Klick legt den Code in die Zwischenablage. Diese Prop fehlt in der Prop-Tabelle der offiziellen Doku, existiert aber in Reflex 0.10. Für einen anders aussehenden Button übergibst du copy_button einen selbst gebauten.

pip install reflex

rx.code_block(
    "pip install reflex",
    language="bash",
    can_copy=True,
)

Stil-Props wie width und font_size sowie custom_style wirken auf den Codekasten. Was gezielt an das innere code-Tag gehen soll, übergibst du mit code_tag_props.

{"name": "reflex", "version": "0.10.0"}

rx.code_block(
    '{"name": "reflex", "version": "0.10.0"}',
    language="json",
    custom_style={"borderRadius": "12px", "fontSize": "15px"},
    code_tag_props={"style": {"fontFamily": "monospace"}},
)

Auftrag erledigt

Den Installationsbefehl zeigst du als bash, den Code der ersten App als python mit Zeilennummern, und beide bekommen einen Kopier-Button.

1. Install

pip install reflex

2. Create an app

1
2
3
4
5
6
7
8
9
import reflex as rx


def index():
    return rx.text("Hello!")


app = rx.App()
app.add_page(index)

rx.vstack(
    rx.text("1. Install", weight="bold"),
    rx.code_block("pip install reflex", language="bash", can_copy=True, width="100%"),
    rx.text("2. Create an app", weight="bold"),
    rx.code_block(
        """import reflex as rx


def index():
    return rx.text("Hello!")


app = rx.App()
app.add_page(index)""",
        language="python",
        show_line_numbers=True,
        can_copy=True,
        width="100%",
    ),
    width="100%",
)

Werkstattnotizen

Mit rx.code_block("Code", language="python") entsteht ein hervorgehobener Codekasten.
theme ist rx.code_block.themes.name. Strings gehen nicht; zur Auswahl per State rx.match.
Zeilen steuern show_line_numbers · starting_line_number · wrap_long_lines.
can_copy=True gibt einen Kopier-Button (0.10, fehlt in der Doku-Tabelle); copy_button ersetzt ihn.

← Zurück

Datenanzeige · Data List

Weiter →

Datenanzeige · Progress

Ü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