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

SVG

rx.el.svgrx.el.svg.circlerx.el.svg.defsrx.el.svg.linear_gradientrx.el.svg.polygonrx.el.svg.pathrx.el.svg.rectrx.el.svg.stop

Documentación oficial

Pedido del taller

Una insignia de verificación: dibuja con código, sin archivos de imagen, una estrella sobre un círculo con degradado y encima una marca de verificación.

SVG es un gráfico vectorial que se dibuja con coordenadas. No se pixela por mucho que lo amplíes, y su forma y color se pueden cambiar con código. rx.el.svg es el lienzo, y las figuras que van dentro están en el espacio de nombres rx.el.svg, como rx.el.svg.circle o rx.el.svg.rect.

rx.el.svg(
    rx.el.svg.circle(cx=50, cy=50, r=40, fill=rx.color("indigo", 9)),
    view_box="0 0 100 100",
    width="100",
    height="100",
)

Prueba las propiedades

Las figuras definen su forma con atributos de posición y tamaño, y su color con fill (relleno) y stroke (trazo). Los valores son números del sistema de coordenadas de view_box.

Prueba las propiedades

rect_width

corner

radius

fill

stroke

stroke_width

rx.el.svg(
    rx.el.svg.rect(
        x="10",
        y="10",
        width="100",
        height="80",
        rx="10",
        fill="#6e56cf",
        stroke="none",
        stroke_width="4",
    ),
    rx.el.svg.circle(cx="160", cy="50", r="35", fill="#6e56cf", fill_opacity="0.6", stroke="none", stroke_width="4"),
    view_box="0 0 220 100",
    width="264",
    height="120",
)

El rx de rect es el redondeo de las esquinas; el r de circle, el radio. Si pones fill a none, solo queda el trazo.

Propiedad	Valores	Por defecto	Uso
`view_box` `width` `height` (svg)	`"0 0 100 100"` / longitud	Ninguno	Sistema de coordenadas del dibujo y tamaño en pantalla
`preserve_aspect_ratio` (svg)	`"xMidYMid meet"` `"none"` …	`"xMidYMid meet"`	Cómo ajustar cuando la proporción no coincide
`cx` `cy` `r` (circle)	Número	`0`	Centro y radio
`x` `y` `width` `height` `rx` `ry` (rect)	Número	`0`	Posición, tamaño, esquinas. Si solo das `rx`, `ry` vale lo mismo
`points` (polygon)	`"x,y x,y …"`	Ninguno	Lista de vértices. El último punto se cierra automáticamente
`d` (path)	Comandos de trazado	Ninguno	`M` mover, `L` recta, `Q`·`C` curvas, `Z` cerrar
`path_length` (común a las figuras)	Número	Longitud real	Considera que el trazo mide este valor (para calcular discontinuos)
`id` `x1` `y1` `x2` `y2` (linear_gradient)	Cadena · número	Izquierda→derecha	Nombre y dirección del degradado
`gradient_units` `gradient_transform` `spread_method` `href` (linear_gradient)	Cadena	Ninguno	Referencia de coordenadas, transformación, tratamiento de los extremos, heredar de otro degradado
`offset` `stop_color` `stop_opacity` (stop)	`"0%"`~~`"100%"` / color / 0~~1	Ninguno	Posición del color y el color
`fill` `stroke` `stroke_width` …	Color · número	Relleno negro	No son atributos propios de la figura: entran como CSS (ver abajo)

El lienzo: svg y view_box

view_box="0 0 100 100" significa "las coordenadas interiores miden 100 de ancho y de alto", y width·height son el tamaño en pantalla. Aunque dibujes la misma imagen a otro tamaño, queda nítida. Si la proporción no coincide, por defecto se reduce centrada; con preserve_aspect_ratio="none", se estira para rellenar (la tercera imagen).

rx.el.div(
    rx.el.svg(
        rx.el.svg.rect(x=0, y=0, width=100, height=100, fill=rx.color("gray", 4)),
        rx.el.svg.circle(cx=50, cy=50, r=30, fill=rx.color("tomato", 9)),
        view_box="0 0 100 100",
        width="60",
        height="60",
    ),
    rx.el.svg(
        rx.el.svg.rect(x=0, y=0, width=100, height=100, fill=rx.color("gray", 4)),
        rx.el.svg.circle(cx=50, cy=50, r=30, fill=rx.color("tomato", 9)),
        view_box="0 0 100 100",
        width="120",
        height="120",
    ),
    rx.el.svg(
        rx.el.svg.rect(x=0, y=0, width=100, height=100, fill=rx.color("gray", 4)),
        rx.el.svg.circle(cx=50, cy=50, r=30, fill=rx.color("tomato", 9)),
        view_box="0 0 100 100",
        preserve_aspect_ratio="none",
        width="200",
        height="80",
    ),
    display="flex",
    gap="16px",
    align_items="end",
)

Figuras básicas

rect, circle y polygon son las figuras que aparecen en la documentación oficial, y Reflex 0.10 incluye además elementos como ellipse, line, polyline, g y text. En 0.10, fill·stroke·stroke_width no están en la lista de atributos de las figuras, así que entran como CSS. Los atributos de color de SVG funcionan igual como CSS, así que el resultado es el mismo, y también puedes usar colores del tema como rx.color(...).

rx.el.svg(
    rx.el.svg.rect(x=10, y=20, width=60, height=60, rx=12, fill=rx.color("teal", 9)),
    rx.el.svg.circle(cx=120, cy=50, r=30, fill=rx.color("amber", 9)),
    rx.el.svg.polygon(points="200,20 230,80 170,80", fill=rx.color("crimson", 9)),
    rx.el.svg.ellipse(cx=290, cy=50, rx=40, ry=22, fill=rx.color("blue", 9)),
    rx.el.svg.line(x1=10, y1=95, x2=330, y2=95, stroke="gray", stroke_width=2),
    view_box="0 0 340 100",
    width="340",
    height="100",
)

path: trazos libres

En d se encadenan comandos. M10 80 mueve el lápiz, Q es una curva cuadrática y T continúa suavemente la curva anterior. Para dibujar solo el trazo, fill="none". path_length=100 hace que la longitud se considere 100, lo que facilita calcular en proporción discontinuos como stroke_dasharray="10 5".

rx.el.svg(
    rx.el.svg.path(
        d="M10 80 Q 55 10, 100 80 T 190 80",
        fill="none",
        stroke=rx.color("indigo", 9),
        stroke_width=4,
    ),
    rx.el.svg.path(
        d="M10 95 L 190 95",
        path_length=100,
        stroke="gray",
        stroke_width=3,
        stroke_dasharray="10 5",
    ),
    view_box="0 0 200 100",
    width="300",
    height="150",
)

Degradados: defs, linear_gradient, stop

Lo que va dentro de defs no se dibuja directamente: es material que se usa llamándolo por su nombre (id). En linear_gradient, x1·y1→x2·y2 es la dirección, y stop es donde se coloca cada color. Si das "url(#id)" al fill de una figura, se pinta con el degradado. Elige id que no se repitan en la página.

rx.el.svg(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="0%", stop_color="#6e56cf"),
            rx.el.svg.stop(offset="100%", stop_color="#e54d2e", stop_opacity="0.8"),
            id="htmlsvg_sunset",
            x1="0",
            y1="0",
            x2="1",
            y2="1",
        ),
    ),
    rx.el.svg.rect(x=0, y=0, width=200, height=100, rx=16, fill="url(#htmlsvg_sunset)"),
    view_box="0 0 200 100",
    width="240",
    height="120",
)

Dibujar con el State

Si pones valores del State en los atributos de las figuras, el dibujo sigue a los datos. La x de cada barra se calcula con el segundo argumento (la posición) de rx.foreach.

import random


class HtmlSvgBarState(rx.State):
    values: list[int] = [40, 75, 55, 90, 30]

    @rx.event
    def shuffle(self):
        self.values = [random.randint(10, 95) for _ in self.values]


rx.el.div(
    rx.el.svg(
        rx.foreach(
            HtmlSvgBarState.values,
            lambda v, i: rx.el.svg.rect(x=i * 40 + 10, y=100 - v, width=28, height=v, rx=4, fill=rx.color("grass", 9)),
        ),
        view_box="0 0 210 100",
        width="210",
        height="100",
    ),
    rx.el.button("Shuffle", on_click=HtmlSvgBarState.shuffle, padding="4px 12px", border="1px solid gray", border_radius="6px", margin_top="8px"),
)

Completar el pedido

El círculo se pinta con el degradado de defs, la estrella es un polygon de 10 vértices y la marca es un path con los extremos redondeados.

rx.el.svg(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="0%", stop_color="#3e63dd"),
            rx.el.svg.stop(offset="100%", stop_color="#12a594"),
            id="htmlsvg_badge",
            x1="0",
            y1="0",
            x2="0",
            y2="1",
        ),
    ),
    rx.el.svg.circle(cx=60, cy=60, r=56, fill="url(#htmlsvg_badge)"),
    rx.el.svg.polygon(points="60,18 70,44 98,46 76,63 84,90 60,75 36,90 44,63 22,46 50,44", fill="#ffd60a"),
    rx.el.svg.path(d="M44 62 L56 74 L78 50", fill="none", stroke="white", stroke_width=6, stroke_linecap="round", stroke_linejoin="round"),
    view_box="0 0 120 120",
    width="120",
    height="120",
)

Notas del taller

rx.el.svg es el lienzo: view_box son las coordenadas interiores; width·height, el tamaño en pantalla.
Las figuras son rx.el.svg.rect·circle·polygon·path; en 0.10 también ellipse·line·g·text.
En 0.10, fill·stroke entran como CSS, pero el resultado es el mismo. También vale el color del tema rx.color.
Degradados: defs > linear_gradient(id) > stop; se usan con fill="url(#id)".
Pon valores del State en los atributos y crea figuras con rx.foreach para obtener gráficos de datos.

← Anterior

Elementos HTML · HTML Tables

Otras herramientas · Theme

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