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

Blockquote

rx.blockquote

Offizielle Doku

Werkstattauftrag

Bitte auf der Startseite des Onlineshops eine Kundenbewertung groß als Zitat zeigen, und per Button soll man zur nächsten Bewertung blättern können.

rx.blockquote ist ein Zitatabsatz, der Worte oder Texte anderer abgesetzt zeigt. Daraus wird ein HTML-<blockquote>, und ein senkrechter Balken links trennt es vom Fließtext. Du nimmst es für Zitate als geschlossenen Block: Bewertungen, Sinnsprüche, Auszüge aus Dokumenten.

Perfect typography is certainly the most elusive of all arts.

rx.blockquote("Perfect typography is certainly the most elusive of all arts.")

Props ausprobieren

Größe, Stärke und Farbe lassen sich ändern. Die Farbe gilt für den Text und den Balken links zugleich.

Props ausprobieren

Perfect typography is certainly the most elusive of all arts.

label

size

weight

color

high_contrast

rx.blockquote("Perfect typography is certainly the most elusive of all arts.", size="3", weight="regular", color_scheme="indigo", high_contrast=False)

Mit größerem size passen sich auch Zeilenhöhe und Laufweite an. high_contrast macht den Text dunkler.

Prop	Werte	Standard	Verwendung
`size`	`"1"` bis `"9"`	geerbt	Schriftgröße, Zeilenhöhe und Laufweite
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	geerbt	Schriftstärke
`color_scheme`	Radix-Farbname	Themenfarbe	Farbe von Text und Balken
`high_contrast`	`True` / `False`	`False`	Dunklerer Text
`cite`	Adresse als Zeichenkette	keiner	Adresse der Quelle (nicht sichtbar)

An Events gibt es nur die Standard-Events.

Größe und Stärke

size reicht von "1" bis "9". Je größer, desto kleiner werden Zeilenabstand und Laufweite im Verhältnis, sodass auch große Zitate kompakt wirken.

Perfect typography is an elusive art.

rx.flex(
    rx.blockquote("Perfect typography is an elusive art.", size="1"),
    rx.blockquote("Perfect typography is an elusive art.", size="3"),
    rx.blockquote("Perfect typography is an elusive art.", size="5"),
    rx.blockquote("Perfect typography is an elusive art.", size="7"),
    rx.separator(),
    rx.blockquote("Perfect typography is an elusive art.", weight="light"),
    rx.blockquote("Perfect typography is an elusive art.", weight="regular"),
    rx.blockquote("Perfect typography is an elusive art.", weight="medium"),
    rx.blockquote("Perfect typography is an elusive art.", weight="bold"),
    direction="column",
    spacing="3",
)

Farbe und Kontrast

Mit color_scheme nimmst du eine andere Farbe als das Theme, mit high_contrast=True dunkleren Text. Links der Standard, rechts hoher Kontrast.

Good design is honest.

rx.grid(
    rx.blockquote("Good design is honest.", color_scheme="indigo"),
    rx.blockquote("Good design is honest.", color_scheme="indigo", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="cyan"),
    rx.blockquote("Good design is honest.", color_scheme="cyan", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="crimson"),
    rx.blockquote("Good design is honest.", color_scheme="crimson", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="orange"),
    rx.blockquote("Good design is honest.", color_scheme="orange", high_contrast=True),
    columns="2",
    spacing="3",
)

Quelle angeben: cite

In cite steht die Adresse des zitierten Texts. Im Browser erscheint sie nicht, sie bleibt nur als HTML-Attribut erhalten, damit Suchmaschinen und Hilfstechnologien die Quelle kennen. Soll ein Mensch die Quelle sehen, fügst du wie unten ein eigenes rx.text hinzu.

Less, but better.

Dieter Rams

rx.box(
    rx.blockquote(
        "Less, but better.",
        cite="https://en.wikipedia.org/wiki/Dieter_Rams",
        size="5",
    ),
    rx.text("Dieter Rams", size="2", color_scheme="gray", margin_top="6px", margin_left="16px"),
)

Blockquote und Quote

rx.blockquote ist ein eigenständiger Absatz, rx.text.quote ein kurzes Zitat innerhalb eines Satzes. Unterbrichst du den Satz und zeigst das Zitat abgesetzt, nimmst du Blockquote; steht es im Satz, nimmst du Quote.

A blockquote is its own block, set apart from the paragraph.

A quote stays inside the sentence: short and inline, then the sentence goes on.

rx.flex(
    rx.blockquote("A blockquote is its own block, set apart from the paragraph."),
    rx.text(
        "A quote stays inside the sentence: ",
        rx.text.quote("short and inline"),
        ", then the sentence goes on.",
    ),
    direction="column",
    spacing="4",
)

Auftrag erledigt

Die Liste der Bewertungen liegt im State, geändert wird nur die Nummer der gerade angezeigten (index). Zitat und Name sind beide State-Werte und wechseln daher bei jedem Klick gemeinsam.

Arrived in two days and fits perfectly.

Mina, Seoul

class BlockquoteReviewState(rx.State):
    reviews: list[dict[str, str]] = [
        {"text": "Arrived in two days and fits perfectly.", "name": "Mina, Seoul"},
        {"text": "The fabric feels even better than the photos.", "name": "Jun, Busan"},
        {"text": "Third order this year. Still happy.", "name": "Sora, Daegu"},
    ]
    index: int = 0

    @rx.event
    def next_review(self):
        self.index = (self.index + 1) % len(self.reviews)


rx.card(
    rx.blockquote(BlockquoteReviewState.reviews[BlockquoteReviewState.index]["text"], size="4", color_scheme="indigo"),
    rx.flex(
        rx.text(BlockquoteReviewState.reviews[BlockquoteReviewState.index]["name"], size="2", color_scheme="gray"),
        rx.spacer(),
        rx.button("Next review", rx.icon("arrow-right"), on_click=BlockquoteReviewState.next_review, size="1", variant="soft"),
        align="center",
        margin_top="12px",
        padding_left="16px",
    ),
    max_width="420px",
)

Werkstattnotizen

rx.blockquote("…") ist ein abgesetzter Zitatabsatz (<blockquote>).
Das Aussehen bestimmen size "1" bis "9", weight, color_scheme und high_contrast.
cite hinterlegt die Quellenadresse nur im HTML. Eine sichtbare Quelle kommt als eigenes rx.text dazu.
Kurze Zitate im Satz: rx.text.quote.

← Zurück

Typografie · Markdown

Weiter →

Typografie · Quote

Ü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