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

Callout

rx.calloutrx.callout.rootrx.callout.iconrx.callout.text

Documentación oficial

Pedido del taller

En la parte superior de la pantalla de pago, muestra bien visible el aviso «La tarjeta ha sido rechazada» y, debajo, una nota discreta sobre el envío.

rx.callout es un aviso breve que debe captar la atención del usuario. El texto se pasa como primer argumento y, en icon, el nombre del icono que va delante. Para el nombre del icono se usa tal cual el nombre de Lucide de la página Icon.

You will need admin privileges to install and access this application.

rx.callout(
    "You will need admin privileges to install and access this application.",
    icon="info",
)

Prueba las propiedades

Your trial ends in 3 days.

text

icon

size

variant

color

high_contrast

rx.callout("Your trial ends in 3 days.", icon="info", size="2", variant="soft", color_scheme="indigo", high_contrast=False)

size elige el tamaño, variant el tipo de relleno y color_scheme el color. Si cambias el nombre de icon, cambia el icono de delante.

Propiedad	Valores	Por defecto	Uso
Primer argumento (`text`)	Texto	Obligatorio	La frase del aviso
`icon`	Nombre de icono Lucide	Ninguno	Icono que va delante; sin él, solo se ve el texto
`size`	`"1"` `"2"` `"3"`	`"2"`	Tamaño del texto y relleno interior
`variant`	`"soft"` `"surface"` `"outline"`	`"soft"`	Tipo de relleno
`color_scheme`	Nombre de color Radix	Color del tema	Color que transmite el carácter del aviso
`high_contrast`	`True` / `False`	`False`	Más contraste
`role`	`"alert"`, etc.	Ninguno	Rol que se anuncia a los lectores de pantalla

Como alerta

Con color rojo, un icono de aviso y role="alert", también los lectores de pantalla leen este texto de inmediato. Úsalo para cosas que hay que comunicar al momento, como errores o accesos denegados.

Access denied. Please contact the network administrator to view this page.

rx.callout(
    "Access denied. Please contact the network administrator to view this page.",
    icon="triangle_alert",
    color_scheme="red",
    role="alert",
)

Tamaño y variant

size va de "1" a "3". Cuanto mayor el número, más grandes el texto y los márgenes.

Size 3

Size 2

Size 1

rx.flex(
    rx.callout("Size 3", icon="info", size="3"),
    rx.callout("Size 2", icon="info", size="2"),
    rx.callout("Size 1", icon="info", size="1"),
    direction="column",
    spacing="3",
    align="start",
)

variant tiene tres opciones: "soft" por defecto (fondo suave), "surface" (fondo suave con borde) y "outline" (solo borde).

soft (default)

surface

outline

rx.flex(
    rx.callout("soft (default)", icon="info", variant="soft"),
    rx.callout("surface", icon="info", variant="surface"),
    rx.callout("outline", icon="info", variant="outline"),
    direction="column",
    spacing="3",
)

Color y contraste

color_scheme fija el color del aviso con independencia del tema. Si distingues éxito, aviso y error por color, el carácter del mensaje se ve antes de leerlo.

Your changes were saved.

Your trial ends in 3 days.

Payment failed.

rx.flex(
    rx.callout("Your changes were saved.", icon="circle_check", color_scheme="green"),
    rx.callout("Your trial ends in 3 days.", icon="clock", color_scheme="amber"),
    rx.callout("Payment failed.", icon="circle_x", color_scheme="red"),
    direction="column",
    spacing="3",
)

high_contrast=True oscurece el texto para aumentar el contraste.

Default contrast

High contrast

rx.flex(
    rx.callout("Default contrast", icon="info"),
    rx.callout("High contrast", icon="info", high_contrast=True),
    direction="column",
    spacing="3",
)

Montarlo pieza a pieza

rx.callout("texto", icon=…) es en realidad un atajo que crea tres piezas de golpe. Si dentro de rx.callout.root pones rx.callout.icon (el hueco del icono) y rx.callout.text (el hueco del texto), obtienes el mismo resultado. Móntalo así cuando quieras meter un enlace en mitad del texto o dar propiedades propias al icono. Las propiedades de aspecto (size, variant, color_scheme, high_contrast) van en root.

You will need admin privileges to install this application.

rx.callout.root(
    rx.callout.icon(rx.icon("info")),
    rx.callout.text(
        "You will need ",
        rx.link("admin privileges", href="#"),
        " to install this application.",
    ),
    color_scheme="blue",
)

Completar el pedido

El rechazo del pago va como alerta roja y grande; la nota de envío, discreta, con surface y tamaño pequeño.

Your card was declined. Please use another payment method.

Orders placed after 3 PM ship the next business day.

rx.flex(
    rx.callout(
        "Your card was declined. Please use another payment method.",
        icon="triangle_alert",
        color_scheme="red",
        role="alert",
    ),
    rx.callout.root(
        rx.callout.icon(rx.icon("info")),
        rx.callout.text("Orders placed after 3 PM ship the next business day."),
        variant="surface",
        size="1",
    ),
    direction="column",
    spacing="3",
)

Notas del taller

rx.callout("texto", icon="info") crea un aviso breve.
size de "1" a "3", variant: soft (por defecto) · surface · outline; el carácter se expresa con color_scheme.
Para errores que hay que comunicar al momento: color_scheme="red" y role="alert".
Para meter enlaces u otros elementos en el texto, móntalo con callout.root + callout.icon + callout.text.

← Anterior

Visualización de datos · Icon

Visualización de datos · List

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