Schön machen: Komponenten, Props und Styles

Bisher hast du ganz selbstverständlich Komponenten wie rx.button, rx.heading und rx.box verwendet. In dieser Lektion fassen wir zusammen, wie du Komponenten erstellst, zusammensetzt und gestaltest. Dafür gibt es genau zwei Regeln.

5-1. Eine Komponente ist der Rückgabewert einer Funktion (1 Min.)

Eine Komponente ist ein Baustein der Oberfläche, etwa ein Button, ein Text oder ein Bild. Reflex bringt viele eingebaute Komponenten mit, und sobald du eine Funktion schreibst, die eine Komponente zurückgibt, hast du deine eigene Komponente.

def my_button():
    return rx.button("Click Me")

5-2. Regel 1: Positionsargumente sind Kinder (2 Min.)

Um eine Komponente in eine andere zu setzen, übergibst du sie als Positionsargument. Unten sind rx.text und my_button() Kinder von rx.box. Auch Komponenten aus anderen Funktionen rufst du einfach auf und setzt sie ein.

def my_container():
    return rx.box(
        rx.text("This is a page"),
        # Reference components defined in other functions.
        my_button(),
    )

Gibt es die gewünschte Komponente nicht, kannst du mit rx.el direkt HTML-Tags verwenden. rx.el.div ist <div>, rx.el.p ist <p>.

def my_div():
    return rx.el.div(
        rx.el.p("Use base html!"),
    )

Reicht auch das nicht, kannst du React-Komponenten aus npm einbinden (wrappen).

5-3. Regel 2: Keyword-Argumente sind Props und Styles (2 Min.)

Verhalten und Aussehen einer Komponente legst du mit Keyword-Argumenten fest. Diese heißen Props. Jede Komponente hat ihre eigenen Props. Wenn du eine Komponente zum ersten Mal verwendest, schau in der Dokumentation nach, welche es gibt.

def half_filled_progress():
    return rx.progress(value=50)

Neben den eigenen Props einer Komponente kannst du auch CSS-Eigenschaften direkt als Props übergeben, um sie zu gestalten.

def round_button():
    return rx.button("Click Me", border_radius="15px", font_size="18px")

Zusammengefasst besteht eine Komponente aus Kindern und Props.

Auch in Lektion 1, als du eine Var mit rx.heading(MyState.count, color=MyState.color) sowohl als Kind als auch als Prop eingesetzt hast, galten genau diese zwei Regeln.

Übungen

1. Ergänze round_button um color_scheme="green" und size="3".
2. Gib dem rx.box in my_container padding="16px", border="1px solid #ccc" und border_radius="12px", damit es wie eine Karte aussieht.
3. Was passiert, wenn du value von rx.progress durch CounterState.count aus Lektion 1 ersetzt? Bau es so, dass sich der Balken bei jedem Klick weiter füllt.

Checkliste zu dieser Lektion

• Ich kann erklären, was aus Positionsargumenten und was aus Keyword-Argumenten wird.
• Ich kann CSS-Eigenschaften als snake_case-Props schreiben.
• Ich kann rx.el verwenden, wenn es die passende Komponente nicht gibt.