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

Elementos HTML

HTML Text

rx.el.abbrrx.el.brx.el.bdirx.el.bdorx.el.brrx.el.citerx.el.coderx.el.datarx.el.dfnrx.el.emrx.el.irx.el.kbdrx.el.markrx.el.qrx.el.rprx.el.rtrx.el.rubyrx.el.srx.el.samprx.el.smallrx.el.strongrx.el.subrx.el.suprx.el.timerx.el.urx.el.wbr

Documentación oficial

Pedido del taller

En una línea de notas de versión, marca la versión, la fecha, el nuevo atajo de teclado y la función eliminada, cada uno con el elemento de texto HTML adecuado.

Son 26 elementos HTML que dan significado a palabras concretas dentro de una frase: énfasis, código, teclas, citas, superíndices, fechas y cosas así. Casi todos son elementos en línea que se quedan dentro de la línea de texto, así que se mezclan dentro de rx.el.p o rx.text. El navegador les da un aspecto básico (negrita, cursiva, monoespaciada), y los buscadores y lectores de pantalla leen su significado.

Press Ctrl + S to save your work.

rx.el.p(
    "Press ",
    rx.el.kbd("Ctrl"),
    " + ",
    rx.el.kbd("S"),
    " to ",
    rx.el.strong("save"),
    " your work.",
)

Prueba las propiedades

Los elementos de texto casi no tienen atributos propios y se manejan con atributos comunes y estilos. Cambia el color de fondo de mark y el dir (dirección del texto) de bdo.

Prueba las propiedades

Reflex | Reflex | Reflex

word

mark_color

direction

size

rx.el.p(
    rx.el.mark("Reflex", background="yellow"),
    " | ",
    rx.el.bdo("Reflex", dir="rtl"),
    " | ",
    rx.el.small("Reflex"),
    font_size="18px",
)

Si das dir="rtl" a bdo, el orden de las letras se invierte tal cual. mark·small cambian de aspecto con estilos.

Propiedad	Valores	Por defecto	Uso
`value` (data)	Cadena · número	Ninguno	Valor legible por máquina detrás del texto para personas
`date_time` (time)	`"2026-05-01"`, `"09:00"` …	Ninguno	Formato estándar de fecha y hora
`cite` (q)	URL	Ninguno	Dirección de la fuente citada (no se ve en pantalla)
`title` (abbr, dfn)	Cadena	Ninguno	Forma completa de la abreviatura. Se ve al pasar el ratón
`dir` (bdo, bdi)	`"ltr"` `"rtl"`	Hereda del padre	Dirección del texto
Atributos comunes y estilos	`id` `class_name` `color` …	Ninguno	Se pueden usar en todos los elementos de texto

Énfasis y significado

Hay parejas que se ven igual pero significan cosas distintas. strong es importancia; b, solo negrita. em es el acento al hablar; i, otra voz (términos, palabras extranjeras). u es una anotación que debe marcarse con subrayado, s es contenido que ya no es correcto, mark es un rotulador fluorescente y small, letra pequeña añadida.

strong important · b just bold

em stressed · i different voice

u annotated · s no longer true

mark highlighted · small side note

rx.el.div(
    rx.el.p(rx.el.strong("strong"), " important  ·  ", rx.el.b("b"), " just bold"),
    rx.el.p(rx.el.em("em"), " stressed  ·  ", rx.el.i("i"), " different voice"),
    rx.el.p(rx.el.u("u"), " annotated  ·  ", rx.el.s("s"), " no longer true"),
    rx.el.p(rx.el.mark("mark"), " highlighted  ·  ", rx.el.small("small"), " side note"),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Código y teclado

code es un fragmento de código, kbd una tecla que debe pulsar el usuario y samp la salida de un programa. Los tres aparecen en letra monoespaciada.

Run reflex run in the terminal.

Then press Ctrl + C to stop.

The terminal prints: App running at http://localhost:3000

rx.el.div(
    rx.el.p("Run ", rx.el.code("reflex run"), " in the terminal."),
    rx.el.p("Then press ", rx.el.kbd("Ctrl"), " + ", rx.el.kbd("C"), " to stop."),
    rx.el.p("The terminal prints: ", rx.el.samp("App running at http://localhost:3000")),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Citas, fuentes y definiciones

q es una cita corta, y el navegador le añade comillas. En el atributo cite va la dirección de la fuente; en el elemento cite, el título de la obra. dfn es un término que se define en ese mismo lugar, y abbr es una abreviatura cuya forma completa va en title.

As The Zen of Python says: Simple is better than complex.

A component is a reusable piece of UI.

rx.el.div(
    rx.el.p(
        "As ",
        rx.el.cite("The Zen of Python"),
        " says: ",
        rx.el.q("Simple is better than complex.", cite="https://peps.python.org/pep-0020/"),
    ),
    rx.el.p(
        "A ",
        rx.el.dfn("component"),
        " is a reusable piece of ",
        rx.el.abbr("UI", title="User Interface"),
        ".",
    ),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Superíndices, subíndices y saltos de línea

sub·sup se usan en fórmulas químicas y exponentes. br hace un salto de línea en ese punto, y wbr marca "aquí se puede partir la línea". La caja de abajo es estrecha, así que la palabra larga se parte donde está wbr.

Water is H₂O. Energy is mc².

Line one
Line two after br

Supercalifragilisticexpialidocious

rx.el.div(
    rx.el.p("Water is H", rx.el.sub("2"), "O. Energy is mc", rx.el.sup("2"), "."),
    rx.el.p("Line one", rx.el.br(), "Line two after br"),
    rx.el.p(
        "Super",
        rx.el.wbr(),
        "califragilistic",
        rx.el.wbr(),
        "expialidocious",
        width="120px",
        padding="6px",
        border="1px dashed gray",
    ),
    display="flex",
    flex_direction="column",
    gap="8px",
)

Valores legibles por máquina

data y time muestran en pantalla texto para personas y guardan en un atributo un valor estándar para que lo lean los programas. A la vista son como texto normal.

Price: $12

Opens on May 1st

Starts at 9 am

rx.el.div(
    rx.el.p("Price: ", rx.el.data("$12", value=12)),
    rx.el.p("Opens on ", rx.el.time("May 1st", date_time="2026-05-01")),
    rx.el.p("Starts at ", rx.el.time("9 am", date_time="09:00")),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Dirección del texto y ruby

bdi aísla del entorno un texto de dirección desconocida (como un nombre de usuario), para que el orden no se líe aunque se mezcle texto escrito de derecha a izquierda. bdo fuerza la dirección. ruby·rt sirven para poner la lectura encima de los caracteres chinos, y rp son paréntesis que solo se ven en navegadores sin soporte de ruby.

Winner: إيان - 3 points

bdo rtl: Hello

漢(kan)字(ji)

rx.el.div(
    rx.el.p("Winner: ", rx.el.bdi("إيان"), " - 3 points"),
    rx.el.p("bdo rtl: ", rx.el.bdo("Hello", dir="rtl")),
    rx.el.p(
        rx.el.ruby("漢", rx.el.rp("("), rx.el.rt("kan"), rx.el.rp(")"), "字", rx.el.rp("("), rx.el.rt("ji"), rx.el.rp(")")),
        font_size="24px",
    ),
    display="flex",
    flex_direction="column",
    gap="6px",
)

Completar el pedido

La versión va en strong, la fecha en time, el atajo en kbd, lo eliminado en s, lo nuevo en mark y las aclaraciones en small y abbr.

v2.1 · released Oct 24, 2026

Search now opens with Ctrl + K. ~~Slash key~~ New shortcut.

Requires API v3.

rx.el.div(
    rx.el.p(
        rx.el.strong("v2.1"),
        " · released ",
        rx.el.time("Oct 24, 2026", date_time="2026-10-24"),
    ),
    rx.el.p(
        "Search now opens with ",
        rx.el.kbd("Ctrl"),
        " + ",
        rx.el.kbd("K"),
        ". ",
        rx.el.s("Slash key"),
        " ",
        rx.el.mark("New shortcut"),
        ".",
    ),
    rx.el.p(rx.el.small("Requires ", rx.el.abbr("API", title="Application Programming Interface"), " v3.")),
    padding="12px 16px",
    border_left=f"4px solid {rx.color('indigo', 9)}",
    background=rx.color("gray", 2),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Notas del taller

Los elementos de texto dan significado a palabras dentro de una frase. Se mezclan con el texto dentro de rx.el.p.
strong/b o em/i se ven igual pero significan cosas distintas. Si hay significado, strong·em.
code es código, kbd una tecla que pulsar y samp la salida de un programa.
Solo hay tres atributos propios: value de data, date_time de time y cite de q. El resto, atributos comunes y estilos.
bdi·bdo, dirección del texto; ruby·rt·rp, lecturas; wbr, punto donde se puede partir la línea.

← Anterior

Elementos HTML · HTML

Elementos HTML · HTML Layout

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