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

Otras herramientas

Html Embed

rx.html

Documentación oficial

Pedido del taller

Muestra los avisos de tienda que llegan desde el sistema central como fragmentos HTML tal cual, sin modificarlos, pero con buen aspecto.

rx.html recibe una cadena de código HTML y la dibuja tal cual. Se usa para mostrar fragmentos que ya vienen en HTML de otro sitio (un CMS, el cuerpo de un correo, un conversor de Markdown). Cuando construyes tú la pantalla, la propia documentación oficial recomienda usar elementos rx.el.* en lugar de rx.html, porque admiten eventos y State.

Hello from raw HTML.

rx.html("<p>Hello from <b>raw</b> <i>HTML</i>.</p>")

Prueba las propiedades

rx.html crea un único <div> y mete el HTML dentro. Por eso los estilos como font_size o color se aplican al div exterior y el texto de dentro los hereda.

Prueba las propiedades

Bold and italic

snippet

size

color

rx.html("<b>Bold</b> and <i>italic</i>", font_size="18px", color="inherit")

Cambia el fragmento HTML y los estilos del div exterior. Las viñetas del ul no se ven por el preflight de este sitio.

Propiedad	Valores	Por defecto	Uso
Primer hijo	Cadena HTML o Var de cadena	Obligatorio	HTML que se dibuja. Acepta exactamente uno
`class_name`	Cadena de clases	Siempre lleva `"rx-Html"`	Clase del `div` exterior
Propiedades de estilo · `style`	CSS, selectores anidados como `"& h2"`	Ninguno	Estilo del `div` exterior y de los elementos de dentro
`dangerouslySetInnerHTML`	`{"__html": ...}`	Automático, a partir del hijo	Implementación interna. Nunca hace falta darlo a mano
Atributos comunes	`id` `title` `role` …	Ninguno	Atributos HTML del `div`

Cinco títulos, un solo aspecto

Es el ejemplo de la documentación oficial. En este sitio, los cinco títulos se ven del mismo tamaño, porque Radix y Tailwind borran el estilo por defecto de los títulos.

Hello World

rx.vstack(
    rx.html("<h2>Hello World</h2>"),
    rx.html("<h3>Hello World</h3>"),
    rx.html("<h4>Hello World</h4>"),
    rx.html("<h5>Hello World</h5>"),
    rx.html("<h6>Hello World</h6>"),
)

Si los estilos han desaparecido

La documentación oficial recomienda class_name="prose" y el plugin @tailwindcss/typography de Tailwind. Este sitio no tiene ese plugin, así que se muestra solo como código.

# The official docs' way: the prose class from the Tailwind typography plugin
rx.html("<h2>Hello World</h2>", class_name="prose")
# + enable the @tailwindcss/typography plugin in rxconfig.py's Tailwind settings (not on this site)

Incluso sin plugin, si das a style selectores anidados como "& h2", puedes dar estilo a cada elemento del HTML interior.

Hello World

rx.html(
    "<h2>Hello World</h2><h3>Hello World</h3><h4>Hello World</h4>",
    style={
        "& h2": {"font_size": "24px", "font_weight": "bold"},
        "& h3": {"font_size": "20px", "font_weight": "bold"},
        "& h4": {"font_size": "16px", "font_weight": "600", "color": rx.color("gray", 11)},
    },
)

Insertar imágenes

La etiqueta <img> también entra tal cual. La documentación oficial usa la imagen del banner de Reflex, pero este curso unifica los recursos externos con imágenes de picsum.

rx.html(
    "<img src='https://picsum.photos/id/1039/400/160' alt='A waterfall' style='border-radius: 8px' />"
)

HTML generado desde el State y escapado

Si das como hijo un Var de cadena, el HTML cambia cada vez que cambia el State. En ese caso, no insertes tal cual el texto que escribe el usuario. Si sustituyes < y > con html.escape, se ven como texto y no como etiquetas. Comprueba que el  de la casilla de abajo no se pone en negrita, sino que se ve tal cual como texto. Las etiquetas <script> que mete rx.html no las ejecuta el navegador aunque no se escapen, pero atributos como onerror sí se ejecutan, así que hace falta escapar.

Welcome, Ada!

Welcome, Ada!

import html


class HtmlEmbedPreviewState(rx.State):
    name: str = "<b>Ada</b>"

    @rx.event
    def change_name(self, value: str):
        self.name = value

    @rx.var
    def card_html(self) -> str:
        safe = html.escape(self.name)
        return f"<p>Welcome, <mark>{safe}</mark>!</p>"


rx.vstack(
    rx.input(value=HtmlEmbedPreviewState.name, on_change=HtmlEmbedPreviewState.change_name, width="100%"),
    rx.html(HtmlEmbedPreviewState.card_html),
    rx.code(HtmlEmbedPreviewState.card_html, size="1"),
    width="100%",
    max_width="420px",
)

Con rx.el

Si puedes construir tú el contenido, es mejor hacer la misma pantalla con elementos rx.el. Cada elemento admite on_click y State, y Reflex se encarga del escapado.

Hello from raw HTML.

Hello from rx.el elements.

rx.flex(
    rx.html("<p>Hello from <b>raw</b> <i>HTML</i>.</p>"),
    rx.el.p("Hello from ", rx.el.b("rx.el"), " ", rx.el.i("elements"), "."),
    direction="column",
    spacing="2",
)

Completar el pedido

No se toca ni una letra del HTML del aviso; desde fuera, con los selectores "& h3", "& ul" y "& a", solo se da estilo al tamaño de los títulos, las viñetas de la lista y el color de los enlaces.

Store hours change

From Nov 1 we open at 8 am.

Mon to Fri: 8 am - 8 pm
Sat: 9 am - 5 pm

rx.card(
    rx.html(
        "<h3>Store hours change</h3>"
        "<p>From <b>Nov 1</b> we open at <mark>8 am</mark>.</p>"
        "<ul><li>Mon to Fri: 8 am - 8 pm</li><li>Sat: 9 am - 5 pm</li></ul>"
        "<p><a href='https://reflex.dev/docs/library/other/html-embed/' target='_blank'>Read more</a></p>",
        style={
            "& h3": {"font_size": "18px", "font_weight": "bold", "margin_bottom": "6px"},
            "& ul": {"list_style_type": "disc", "padding_left": "1.4em", "margin_y": "6px"},
            "& a": {"color": rx.color("indigo", 11), "text_decoration": "underline"},
        },
    ),
    max_width="420px",
)

Notas del taller

rx.html("...") mete la cadena HTML tal cual dentro de un div. Exactamente un hijo.
Si construyes tú la pantalla, mejor elementos rx.el.*. rx.html es para fragmentos que ya son HTML.
Los estilos por defecto de títulos y listas están borrados. Aplícalos con la clase prose o con selectores anidados como "& h2".
Escapa la entrada del usuario con html.escape antes de insertarla.

← Anterior

Otras herramientas · Clipboard

Otras herramientas · Script

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