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 Media

rx.el.arearx.el.audiorx.el.canvasrx.el.embedrx.el.iframerx.el.imgrx.el.mathrx.el.metarx.el.objectrx.el.picturerx.el.sourcerx.el.trackrx.el.video

Documentación oficial

Pedido del taller

Pantalla de detalle de producto: añade una foto grande (cuadrada en pantallas estrechas), un vídeo de uso y un audio de muestra usando solo elementos multimedia de HTML.

Son los elementos HTML que insertan imágenes, vídeo, sonido u otros documentos en la página. Los más habituales son img·video·audio; con picture·source se elige el archivo adecuado para cada pantalla, y con iframe·embed·object se incrustan otros documentos. Son más sencillos que rx.image, rx.video y rx.audio de Reflex y usan tal cual las funciones básicas del navegador.

rx.el.img(src="https://picsum.photos/id/1025/300/200", alt="A dog in a blanket", width="300px", height="200px")

Prueba las propiedades

En img, cambia cómo se ajusta el tamaño a la caja (object_fit) y los filtros CSS; en video, la barra de controles (controls), la repetición y el silencio.

A city street — object_fit: cover recorta para rellenar, contain reduce para que se vea entera y fill estira ignorando la proporción.

Prueba las propiedades

controls

loop

muted

width

rx.el.video(
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
    poster="https://picsum.photos/id/152/320/180",
    controls=True,
    loop=False,
    muted=True,
    plays_inline=True,
    width="280px",
)

Al desactivar controls desaparece la barra de reproducción. poster es la imagen que se ve antes de reproducir.

Propiedad	Valores	Por defecto	Uso
`src` `alt` (img)	URL / cadena	Ninguno	Dirección de la imagen y texto alternativo. `alt` siempre
`src_set` `sizes` (img, source)	Lista de candidatos	Ninguno	Elegir el archivo según densidad y ancho de pantalla
`loading` (img, iframe)	`"lazy"` `"eager"`	`"eager"`	Cargar al acercarse a la pantalla
`decoding` (img)	`"async"` `"sync"` `"auto"`	`"auto"`	Momento en que se decodifica la imagen
`controls` `loop` `muted` `auto_play` (video, audio)	`True` / `False`	`False`	Barra de controles, repetición, silencio, reproducción automática
`poster` `plays_inline` (video)	URL / bool	Ninguno	Imagen previa, reproducir en móvil sin pantalla completa
`preload` (video, audio)	`"none"` `"metadata"` `"auto"`	Según el navegador	Cuánto se descarga por adelantado
`media` `type` (source)	Media query / MIME	Ninguno	Condición y formato del archivo
`kind` `src_lang` `label` `default` (track)	Cadena · bool	Ninguno	Archivo de subtítulos
`src_doc` `sandbox` `allow` (iframe)	HTML / lista de permisos	Ninguno	Documento incrustado y sus restricciones
`shape` `coords` `href` (area)	`"rect"` `"circle"` `"poly"` …	Ninguno	Zona pulsable de un mapa de imagen

img: texto alternativo y candidatos de resolución

alt es el texto que aparece si la imagen no se carga y el que leen los lectores de pantalla. La imagen de la derecha apunta a propósito a una dirección que no existe en este sitio, así que se ve el alt. Si das a src_set candidatos 1x·2x, las pantallas de alta resolución eligen el archivo más grande. loading="lazy" retrasa la carga hasta que la imagen se acerca a la pantalla.

rx.el.div(
    rx.el.img(
        src="https://picsum.photos/id/1025/150/100",
        src_set="https://picsum.photos/id/1025/150/100 1x, https://picsum.photos/id/1025/300/200 2x",
        alt="Sharp on high density screens",
        loading="lazy",
        decoding="async",
    ),
    rx.el.img(src="/no-such-image.png", alt="Broken image: the alt text shows"),
    display="flex",
    gap="12px",
    align_items="center",
)

picture y source: la imagen adecuada para cada pantalla

Se revisan los source de dentro de picture de arriba abajo y se usa el primer archivo cuya condición media se cumpla. Si no se cumple ninguna, se usa el img final. Si estrechas la ventana por debajo de 640px, cambia a una foto cuadrada.

rx.el.picture(
    rx.el.source(media="(max-width: 640px)", src_set="https://picsum.photos/id/1015/300/300"),
    rx.el.img(src="https://picsum.photos/id/1016/480/200", alt="A landscape", max_width="100%"),
)

video, audio, source, track

Puedes dar src directamente o pasar varios archivos de distinto formato como hijos source. El navegador elige el primer source que pueda reproducir. El texto que va después de los source solo se ve en navegadores que no pueden reproducir el vídeo. La reproducción automática (auto_play) solo se permite en la mayoría de navegadores si va con muted.

rx.el.div(
    rx.el.video(
        rx.el.source(src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4", type="video/mp4"),
        "Your browser cannot play this video.",
        controls=True,
        muted=True,
        preload="metadata",
        width="280px",
    ),
    rx.el.audio(
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
        controls=True,
        preload="none",
    ),
    display="flex",
    flex_direction="column",
    gap="12px",
)

track añade un archivo de subtítulos WebVTT (.vtt). Necesita un archivo de subtítulos del mismo sitio, así que aquí se muestra solo como código. El archivo va en la carpeta assets.

rx.el.video(
    rx.el.source(src="/flower.mp4", type="video/mp4"),
    rx.el.track(src="/flower.en.vtt", kind="subtitles", src_lang="en", label="English", default=True),
    controls=True,
)

iframe: una página dentro de la página

Da a src la dirección de otra página o pasa HTML directamente en src_doc. sandbox="" bloquea todos los scripts, formularios y ventanas emergentes del documento incrustado, y solo se habilita lo necesario, como "allow-scripts". title indica a los lectores de pantalla qué contiene. Muchos sitios externos impiden que se les incruste.

rx.el.iframe(
    src_doc="<h3 style='font-family:sans-serif'>Hello from an iframe</h3><p style='font-family:sans-serif'>This page lives in src_doc.</p>",
    sandbox="",
    loading="lazy",
    title="Inline document",
    width="320px",
    height="130px",
    border="1px solid gray",
    border_radius="6px",
)

embed y object

Ambos son formas antiguas de insertar recursos externos. embed solo acepta src y type; object recibe el recurso en data y, si no puede cargarlo, muestra sus hijos en su lugar. Hoy es mejor usar img para imágenes, video para vídeo e iframe para documentos.

rx.el.div(
    rx.el.embed(src="https://picsum.photos/id/237/160/110", type="image/jpeg", width="160px", height="110px"),
    rx.el.object(
        "Fallback text if the data cannot load",
        data="https://picsum.photos/id/40/160/110",
        type="image/jpeg",
        width="160px",
        height="110px",
    ),
    display="flex",
    gap="12px",
)

canvas: un lienzo

canvas es un lienzo en blanco, y el dibujo lo hace JavaScript. Abajo, en on_mount, se dibujan un rectángulo y un círculo con rx.call_script. width·height de canvas no son tamaños CSS sino el número de píxeles del lienzo, así que en Reflex se pasan con custom_attrs (como palabra clave se convertirían en CSS).

rx.el.canvas(
    id="htmlmedia_canvas",
    custom_attrs={"width": "260", "height": "100"},
    border="1px solid gray",
    border_radius="6px",
    on_mount=rx.call_script(
        "const g = document.getElementById('htmlmedia_canvas').getContext('2d');"
        " g.fillStyle = '#6e56cf'; g.fillRect(20, 20, 120, 60);"
        " g.fillStyle = '#e54d2e'; g.beginPath(); g.arc(200, 50, 30, 0, Math.PI * 2); g.fill();"
    ),
)

area: mapas de imagen

Los area dentro de map son las zonas pulsables sobre la imagen. Se asocian escribiendo "#nombre_del_mapa" en el use_map de img. La mitad izquierda de la foto y el círculo de la derecha llevan cada uno a un documento distinto.

rx.el.div(
    rx.el.map(
        rx.el.area(shape="rect", coords="0,0,150,200", href="https://reflex.dev/docs/library/", target="_blank", alt="Library docs"),
        rx.el.area(shape="circle", coords="225,100,60", href="https://reflex.dev/docs/library/html/media/", target="_blank", alt="Media docs"),
        name="htmlmedia-map",
    ),
    rx.el.img(src="https://picsum.photos/id/1060/300/200", alt="Image map", use_map="#htmlmedia-map", width="300px", height="200px"),
)

math y meta

rx.el.math es la caja para fórmulas (MathML), pero las etiquetas que van dentro, como mi·mo·msup, no existen en rx.el. Para fórmulas es más fácil meter el MathML entero con rx.html. meta es información de la cabecera del documento. React 19 sube a la cabecera los meta del cuerpo, así que no se dibujan en la página; normalmente se pasan con el argumento meta de @rx.page.

a^{2} + b^{2} = c^{2}

rx.html("<math display='block'><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></math>")

rx.el.math(...)   # MathML box; rx.el has no mi/mo/mn tags to put inside it
rx.el.meta(name="description", content="A page about media")   # for the document head

@rx.page(title="Media", description="A page about media", meta=[{"name": "theme-color", "content": "#6e56cf"}])
def media_page(): ...

Completar el pedido

La foto se adapta a la pantalla con picture, el vídeo no se descarga hasta pulsarlo gracias a poster y preload="none", y el sonido usa la barra básica de audio.

See it in action

Sound preview

rx.el.div(
    rx.el.picture(
        rx.el.source(media="(max-width: 640px)", src_set="https://picsum.photos/id/26/320/320"),
        rx.el.img(src="https://picsum.photos/id/26/440/240", alt="Travel kit on a table", border_radius="8px", max_width="100%"),
    ),
    rx.el.p("See it in action", font_weight="600", margin_top="8px"),
    rx.el.video(
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
        poster="https://picsum.photos/id/26/440/248",
        controls=True,
        muted=True,
        plays_inline=True,
        preload="none",
        width="100%",
    ),
    rx.el.p("Sound preview", font_weight="600", margin_top="8px"),
    rx.el.audio(src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", controls=True, preload="none"),
    max_width="440px",
)

Notas del taller

img siempre con alt. Con src_set·loading="lazy" se descarga tarde el archivo adecuado.
picture + source(media) para una imagen distinta según la pantalla, con un img al final.
video·audio muestran la barra con controls; la reproducción automática, con muted. Subtítulos, con track.
iframe usa src o src_doc, y se restringe con sandbox. embed·object son formas antiguas.
El tamaño de canvas va en custom_attrs; el dibujo, en JavaScript. meta, con @rx.page(meta=...).

← Anterior

Elementos HTML · HTML Forms

Elementos HTML · HTML Tables

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