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

Visualización de datos

Avatar

rx.avatar

Documentación oficial

Pedido del taller

En la parte superior de la tarjeta de perfil, pon la foto del usuario en un círculo. Para quien no tenga foto, usa la inicial de su nombre.

rx.avatar es una pequeña imagen que representa a un usuario. Si pasas la dirección de una imagen en src, se muestra la foto; si solo das fallback, sin src, aparece un texto como unas iniciales. Se usa en sitios que muestran «quién es»: comentarios, perfiles, listas de participantes.

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200"),
    rx.avatar(fallback="RX"),
    spacing="3",
)

Prueba las propiedades

Si borras src, aparece el texto de fallback. variant, color_scheme y high_contrast se aplican al aspecto de ese texto alternativo.

Prueba las propiedades

src

fallback

size

variant

color

radius

high_contrast

rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="4", variant="soft", color_scheme="indigo", radius="full", high_contrast=False)

Si dejas src vacío, se ve el fallback. size va de "1" a "9"; con radius "full" es un círculo.

Propiedad	Valores	Por defecto	Uso
`src`	Dirección de imagen	Ninguno	Foto que se muestra
`fallback`	Texto	Ninguno	Lo que se ve si no hay foto o no se puede cargar
`size`	`"1"` ~ `"9"`	`"3"`	Tamaño
`variant`	`"solid"` `"soft"`	`"soft"`	Relleno del fondo del texto alternativo
`color_scheme`	Nombre de color Radix	Color del tema	Color del texto alternativo
`high_contrast`	`True` / `False`	`False`	Más contraste entre el texto alternativo y el fondo
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	Valor del tema	Redondeo de las esquinas

Tamaño

size va de "1" a "9"; si no lo indicas, es "3". Para caras pequeñas en una lista van bien "1"~"2"; para la cabecera de un perfil, "6" o más.

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="1"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="2"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="3"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="4"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="5"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="6"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="7"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="8"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="9"),
    spacing="2",
    align="center",
    wrap="wrap",
)

variant y color

variant define el fondo del texto alternativo. "solid" lo rellena por completo y el valor por defecto, "soft", con un tono suave. color_scheme usa ese color sin importar el tema.

rx.flex(
    rx.avatar(fallback="RX", variant="solid"),
    rx.avatar(fallback="RX", variant="soft"),
    rx.avatar(fallback="RX", color_scheme="indigo"),
    rx.avatar(fallback="RX", color_scheme="cyan"),
    rx.avatar(fallback="RX", color_scheme="orange"),
    rx.avatar(fallback="RX", color_scheme="crimson"),
    spacing="2",
    wrap="wrap",
)

high_contrast=True aumenta el contraste entre el texto alternativo y el fondo. La columna izquierda es la normal; la derecha, la de alto contraste.

rx.grid(
    rx.avatar(fallback="RX", variant="solid"),
    rx.avatar(fallback="RX", variant="solid", high_contrast=True),
    rx.avatar(fallback="RX", variant="soft"),
    rx.avatar(fallback="RX", variant="soft", high_contrast=True),
    rows="2",
    flow="column",
    spacing="2",
    width="max-content",
)

Esquinas

radius ignora el valor de esquinas del tema y fija el redondeo solo para este avatar. Se aplica tanto a la foto como al texto alternativo.

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="none"),
    rx.avatar(fallback="RX", radius="small"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="medium"),
    rx.avatar(fallback="RX", radius="large"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="full"),
    spacing="2",
)

Cuando la foto no carga

fallback es lo que se muestra cuando src no se puede cargar. Los dos avatares de abajo apuntan a un archivo que no existe, así que muestran el texto alternativo. En Reflex 0.10, fallback solo acepta texto (str).

rx.flex(
    rx.avatar(src="/no-such-photo.png", fallback="PC"),
    rx.avatar(src="/no-such-photo.png", fallback="?", color_scheme="gray"),
    spacing="2",
)

Completar el pedido

Dentro de una tarjeta colocamos en una fila un avatar grande, el nombre y el usuario, y un botón de editar. Si la foto no carga, se ve "RU" en su lugar.

Reflex User

@reflexuser

rx.card(
    rx.flex(
        rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RU", size="6", radius="full"),
        rx.flex(
            rx.text("Reflex User", weight="bold", size="4"),
            rx.text("@reflexuser", color_scheme="gray", size="2"),
            direction="column",
        ),
        rx.spacer(),
        rx.button("Edit Profile", variant="soft", size="2"),
        spacing="4",
        align="center",
        width="100%",
    ),
    max_width="420px",
)

Notas del taller

rx.avatar(src=…) da la foto y fallback=… el texto alternativo. Lo más seguro es dar los dos.
size de "1" a "9" (por defecto "3"); con radius="full" es un círculo.
variant (solid · soft), color_scheme y high_contrast cambian el aspecto del texto alternativo.
Si src no se puede cargar, se muestra automáticamente el fallback.

← Anterior

Visualización de datos · Badge

Visualización de datos · Icon

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