ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Tipografía

Text

rx.textrx.text.em

Documentación oficial

Pedido del taller

Pon en la tarjeta de producto el nombre en negrita, una descripción pequeña en gris y el precio grande y destacado.

rx.text es la pieza más básica para poner texto en pantalla. Por defecto se convierte en una etiqueta <span>, y el tamaño, el grosor, la alineación y el color se fijan con propiedades. Sirve para todo texto que no sea un título: frases descriptivas, etiquetas, cifras.

The quick brown fox jumps over the lazy dog.

rx.text("The quick brown fox jumps over the lazy dog.")

Prueba las propiedades

El aspecto del texto se controla con las propiedades de abajo. align solo se nota cuando el texto es un bloque que ocupa toda la línea (p, div).

Prueba las propiedades

The quick brown fox jumps over the lazy dog.

label

as_

size

weight

align

trim

color

high_contrast

rx.text("The quick brown fox jumps over the lazy dog.", as_="p", size="3", weight="regular", align="left", trim="normal", color_scheme="gray", high_contrast=False)

Si cambias as_ a span, align deja de notarse: un span solo ocupa el ancho de su texto.

Propiedad	Valores	Por defecto	Uso
`as_`	`"p"` `"label"` `"div"` `"span"` `"b"` `"i"` `"u"` `"abbr"` `"cite"` `"del"` `"em"` `"ins"` `"kbd"` `"mark"` `"s"` `"samp"` `"sub"` `"sup"`	`"span"`	Etiqueta HTML que se genera; el aspecto no cambia
`size`	`"1"` ~ `"9"`	heredado	Tamaño de letra, interlineado y espaciado entre letras
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	heredado	Grosor
`align`	`"left"` `"center"` `"right"`	heredado	Alineación dentro del bloque
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	Recorta el margen del interlineado arriba y abajo del texto
`color_scheme`	nombre de color Radix	color del tema	Color del texto
`high_contrast`	`True` / `False`	`False`	Aumenta el contraste con el fondo
`as_child`	`True` / `False`	`False`	Usa el elemento hijo tal cual y solo le aplica el estilo de texto

size, weight, align y trim también aceptan valores por ancho de pantalla ({"initial": "2", "md": "4"}). En cuanto a eventos, solo tiene los básicos, como on_click.

as_: cambia solo el significado

as_ cambia únicamente la etiqueta que se genera. Las cuatro líneas de abajo son p, label, div y span, pero se ven igual. Si eliges la etiqueta que corresponde al sentido (p para un párrafo, label para el nombre de un campo), los lectores de pantalla y los buscadores entienden mejor el contenido.

This is a paragraph element.

This is a label element.

This is a div element.

This is a span element.

rx.flex(
    rx.text("This is a ", rx.text.strong("paragraph"), " element.", as_="p"),
    rx.text("This is a ", rx.text.strong("label"), " element.", as_="label"),
    rx.text("This is a ", rx.text.strong("div"), " element.", as_="div"),
    rx.text("This is a ", rx.text.strong("span"), " element.", as_="span"),
    direction="column",
    spacing="3",
)

Tamaño, grosor y alineación

size no solo ajusta el tamaño de letra, sino también el interlineado y el espaciado entre letras. Cuanto más grande es el texto, más se reducen ambos en proporción. Para textos largos van bien los tamaños 2 a 4; para texto de interfaz, como la etiqueta junto a un botón, del 1 al 3.

Size 1: captions and hints

Size 2: UI labels

Size 3: body text

Size 5: lead paragraph

Size 7: big numbers

Size 9: hero

rx.flex(
    rx.text("Size 1: captions and hints", size="1"),
    rx.text("Size 2: UI labels", size="2"),
    rx.text("Size 3: body text", size="3"),
    rx.text("Size 5: lead paragraph", size="5"),
    rx.text("Size 7: big numbers", size="7"),
    rx.text("Size 9: hero", size="9"),
    direction="column",
    spacing="3",
)

Light

Regular

Medium

Bold

Left-aligned

Center-aligned

Right-aligned

rx.flex(
    rx.text("Light", weight="light", as_="div"),
    rx.text("Regular", weight="regular", as_="div"),
    rx.text("Medium", weight="medium", as_="div"),
    rx.text("Bold", weight="bold", as_="div"),
    rx.separator(),
    rx.text("Left-aligned", align="left", as_="div"),
    rx.text("Center-aligned", align="center", as_="div"),
    rx.text("Right-aligned", align="right", as_="div"),
    direction="column",
    spacing="3",
    width="100%",
)

trim: igualar los márgenes dentro de una caja

El texto lleva arriba y abajo un margen invisible que viene del interlineado. Por eso, con el mismo padding, el espacio vertical parece mayor que el horizontal. trim recorta ese margen: "start" por arriba, "end" por abajo y "both" por ambos lados. La diferencia se aprecia bien en cajas con borde, como una tarjeta.

Without trim

Typography relates font size, line height and line width.

With trim

Typography relates font size, line height and line width.

rx.flex(
    rx.box(
        rx.heading("Without trim", as_="h2", size="3", margin_bottom="4px"),
        rx.text("Typography relates font size, line height and line width."),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    rx.box(
        rx.heading("With trim", as_="h2", size="3", margin_bottom="4px", trim="start"),
        rx.text("Typography relates font size, line height and line width.", trim="end"),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

Color y contraste

color_scheme usa el color indicado en lugar del color base del tema. Si añades high_contrast=True, el texto toma un tono más oscuro de la misma gama y se distingue mejor del fondo. A la izquierda, el normal; a la derecha, el de alto contraste.

indigo

crimson

orange

rx.grid(
    rx.text("indigo", color_scheme="indigo"),
    rx.text("indigo", color_scheme="indigo", high_contrast=True),
    rx.text("crimson", color_scheme="crimson"),
    rx.text("crimson", color_scheme="crimson", high_contrast=True),
    rx.text("orange", color_scheme="orange"),
    rx.text("orange", color_scheme="orange", high_contrast=True),
    columns="2",
    spacing="2",
)

Mezclar con otras piezas de texto

Si pones como hijos de rx.text cadenas junto con rx.link, rx.text.em, rx.code o rx.text.kbd, solo una parte de la frase se ve distinta.

El navegador junta los espacios seguidos en uno solo. Si necesitas que se vean tal cual, usa la propiedad CSS white_space="pre". Compara la segunda y la tercera línea de abajo.

Look, such a helpful link, an italic emphasis, a piece of computer code, and a hotkey Shift + A within the text.

This is not pre formatted

This is pre formatted

rx.flex(
    rx.text(
        "Look, such a helpful ",
        rx.link("link", href="#"),
        ", an ",
        rx.text.em("italic emphasis"),
        ", a piece of computer ",
        rx.code("code"),
        ", and a hotkey ",
        rx.text.kbd("Shift + A"),
        " within the text.",
        size="4",
    ),
    rx.text("This is not pre     formatted"),
    rx.text("This is pre     formatted", white_space="pre"),
    direction="column",
    spacing="3",
)

En la misma línea que una casilla

Si metes una casilla, un botón de radio o un interruptor dentro de un rx.text con as_="label", el control se alinea con la altura de la primera línea del texto, aunque este ocupe varias líneas. Como es una etiqueta, al pulsar el texto también cambia la casilla.

I understand that these documents are confidential and cannot be shared with a third party.

rx.box(
    rx.text(
        rx.flex(
            rx.checkbox(default_checked=True),
            "I understand that these documents are confidential and cannot be shared with a third party.",
            spacing="2",
        ),
        as_="label",
        size="3",
    ),
    max_width="300px",
)

Completar el pedido

Separamos tres niveles: el nombre en negrita, la descripción pequeña y gris, y el precio grande y en color. A los textos de los extremos superior e inferior de la tarjeta les damos trim para que los márgenes queden parejos.

Linen Shirt

Breathable linen, relaxed fit. Machine washable.

$49.00

rx.card(
    rx.flex(
        rx.text("Linen Shirt", size="4", weight="bold", trim="start"),
        rx.text("Breathable linen, relaxed fit. Machine washable.", size="2", color_scheme="gray"),
        rx.text("$49.00", size="6", weight="bold", color_scheme="indigo", trim="end"),
        direction="column",
        spacing="2",
    ),
    max_width="320px",
)

Notas del taller

rx.text es un span por defecto. Con as_ eliges la etiqueta según el sentido: p, label, div… (el aspecto no cambia).
size "1"~"9" ajusta también interlineado y espaciado. Texto largo 2~4, etiquetas de interfaz 1~3.
align solo se nota en bloques como p o div. trim iguala los márgenes de arriba y abajo dentro de una caja.
color_scheme para el color, high_contrast para el contraste. Para conservar espacios, white_space="pre".
Mezcla como hijos rx.link, rx.code, rx.text.em y rx.text.kbd para dar forma a una frase.

← Anterior

Diseño · Fragment

Tipografía · Heading

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex