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

Superposiciones

Toast

rx.toastrx.toast.provider

Documentación oficial

Pedido del taller

Al pulsar «Guardar» en la pantalla de ajustes, muestra en una esquina un aviso que diga «Guardando…» y que, al terminar, cambie a «Guardado».

rx.toast es un aviso que aparece un momento en una esquina de la pantalla y desaparece solo. A diferencia de un diálogo, no interrumpe lo que se está haciendo, así que se usa cuando basta con comunicar un resultado, como «Se ha guardado». rx.toast(...) no es un componente, sino un evento. Puedes ponerlo directamente en el on_click de un botón o devolverlo desde un event handler con yield o return.

rx.button("Show Toast", on_click=rx.toast("Hello, World!"))

Prueba las propiedades

El aspecto y el comportamiento del aviso se pasan a rx.toast como argumentos con nombre. Cambia un valor y pulsa el botón. duration es el tiempo (en milisegundos) hasta que se cierra solo.

Prueba las propiedades

message

description

position

duration

4000

close_button

invert

dismissible

rx.button(
    "Show toast",
    on_click=rx.toast(
        "Event created",
        description="Sunday, December 3 at 9:00 AM",
        position="bottom-right",
        duration=4000,
        close_button=False,
        invert=False,
        dismissible=True,
    ),
)

position es la esquina donde se apilan los avisos, close_button el botón de cerrar (×) e invert crea un aviso oscuro sobre una pantalla clara.

Opción	Valores	Uso
`description`	Cadena	Pequeña descripción bajo el título
`title`	Cadena	Título (añadido en 0.10; puede usarse en lugar del primer argumento)
`position`	`"top-left"` `"top-center"` `"top-right"` `"bottom-left"` `"bottom-center"` `"bottom-right"`	Esquina en la que aparece el aviso
`duration`	Milisegundos	Tiempo hasta que se cierra solo (4000 por defecto en sonner)
`close_button`	`True` / `False`	Mostrar el botón de cerrar (×)
`invert`	`True` / `False`	Aviso oscuro sobre pantalla clara, y al revés
`important`	`True` / `False`	Que los lectores de pantalla lo lean con más urgencia
`dismissible`	`True` / `False`	Con `False`, no se puede apartar deslizándolo
`action` · `cancel`	`{"label": texto, "on_click": evento}`	Botón principal · botón secundario. Al pulsarlos, el aviso se cierra
`id`	Cadena	Nombre del aviso. Si vuelves a enviar con el mismo id, ese aviso cambia
`unstyled` · `style` · `class_name`	-	Quitar el estilo por defecto, darle estilo propio
`on_dismiss`	Evento	Al pulsar el botón de cerrar o apartarlo deslizándolo
`on_auto_close`	Evento	Al cerrarse solo una vez pasado `duration`

Hay funciones por tipo, rx.toast.success, rx.toast.error, rx.toast.warning, rx.toast.info y rx.toast.loading, y un evento para cerrar, rx.toast.dismiss(id).

Enviarlo desde el State

Un event handler puede enviar un aviso con yield rx.toast(...) cuando termina su trabajo. El handler de abajo espera un segundo, como si estuviera trayendo datos, y luego muestra el aviso. Si usas await asyncio.sleep en un handler async, el servidor puede hacer otras cosas mientras espera.

import asyncio


class ToastFetchState(rx.State):
    @rx.event
    async def fetch_data(self):
        # Simulate fetching data for a 1-second delay
        await asyncio.sleep(1)
        # Shows a toast when the data is fetched
        yield rx.toast("Data fetched!")


rx.button("Get Data", on_click=ToastFetchState.fetch_data)

Avisos con botones

Si pasas a action y cancel un dict con label y on_click, aparecen botones dentro del aviso. Al pulsar uno se ejecuta su evento y el aviso se cierra. Si se pulsa cerrar (×) o se aparta deslizándolo, se llama a on_dismiss; si se cierra solo al acabarse el tiempo, a on_auto_close. Comprueba en el registro de abajo qué evento se ha llamado.

class ToastActionState(rx.State):
    log: list[str] = []

    @rx.event
    def add_log(self, line: str):
        self.log = (self.log + [line])[-4:]


rx.flex(
    rx.button(
        "Delete item",
        on_click=rx.toast(
            "Item deleted",
            action={"label": "Undo", "on_click": ToastActionState.add_log("Undo clicked")},
            cancel={"label": "Dismiss", "on_click": ToastActionState.add_log("Dismiss clicked")},
            close_button=True,
            on_dismiss=ToastActionState.add_log("Closed or swiped away"),
            on_auto_close=ToastActionState.add_log("Closed automatically"),
        ),
    ),
    rx.vstack(rx.foreach(ToastActionState.log, lambda line: rx.code(line)), spacing="1"),
    direction="column",
    spacing="3",
    align="start",
)

Tipos predefinidos

Para éxito, error, advertencia e información hay funciones con su icono y su color. El toaster por defecto de Reflex usa rich_colors=True, así que el color de fondo también cambia según el tipo.

rx.hstack(
    rx.button("Success", on_click=rx.toast.success("Success!"), color_scheme="green"),
    rx.button("Error", on_click=rx.toast.error("Error!"), color_scheme="red"),
    rx.button("Warning", on_click=rx.toast.warning("Warning!"), color_scheme="orange"),
    rx.button("Info", on_click=rx.toast.info("Info!"), color_scheme="blue"),
    wrap="wrap",
)

En 0.10 también existen rx.toast.loading y rx.toast.dismiss. El aviso de carga no se cierra solo, así que se reemplaza enviando otro aviso con el mismo id o se cierra con rx.toast.dismiss. Si llamas a rx.toast.dismiss() sin id, se cierran todos los avisos.

rx.flex(
    rx.button("Start", on_click=rx.toast.loading("Uploading…", id="upload-demo"), variant="soft"),
    rx.button("Finish", on_click=rx.toast.success("Upload complete", id="upload-demo"), variant="soft", color_scheme="green"),
    rx.button("Dismiss all", on_click=rx.toast.dismiss(), variant="soft", color_scheme="gray"),
    spacing="3",
    wrap="wrap",
)

Estilo propio

Si el aspecto de cada tipo no encaja, pasa CSS en style y dale tu propio estilo. position también se puede fijar aviso por aviso.

rx.button(
    "Custom",
    on_click=rx.toast(
        "Custom Toast!",
        position="top-right",
        style={
            "background-color": "green",
            "color": "white",
            "border": "1px solid green",
            "border-radius": "0.5em",
        },
    ),
)

El toaster: rx.toast.provider

Para mostrar avisos tiene que haber un toaster (rx.toast.provider) en algún lugar de la app. El rx.App de Reflex 0.10 ya incluye uno por defecto en su ajuste toaster, así que normalmente no hace falta añadirlo (la documentación oficial lo describe como incluido en overlay_component). Para cambiar los valores por defecto de los avisos de toda la app, pasa un toaster al crear rx.App. Como afecta a todo el sitio, en esta página solo se muestra el código.

app = rx.App(
    toaster=rx.toast.provider(
        position="top-center",
        close_button=True,
        visible_toasts=3,
        toast_options=rx.toast.options(duration=6000),
    ),
)

Propiedad del toaster	Uso
`position`	Posición por defecto (`"bottom-right"` por defecto en Reflex)
`rich_colors`	Color de fondo por tipo (`True` por defecto en Reflex)
`expand`	Mostrar desplegados los avisos apilados (`True` por defecto en Reflex)
`close_button`	Botón de cerrar en todos los avisos (`False` por defecto)
`visible_toasts` · `gap` · `offset`	Cuántos se ven a la vez, separación entre avisos, distancia al borde de la pantalla
`theme` · `invert` · `dir`	Claro u oscuro (por defecto sigue el modo de color del sitio), inversión, dirección del texto
`hotkey`	Atajo de teclado que lleva el foco al toaster
`toast_options`	Opciones por defecto de todos los avisos (`rx.toast.options(...)`)
`loading_icon` · `pause_when_page_is_hidden`	Icono de carga, detener el tiempo cuando la pestaña está oculta

Completar el pedido

El handler de guardado envía primero un aviso de carga y, al terminar, un aviso de éxito con el mismo id. Así no se apila un aviso nuevo, sino que «Guardando…» cambia a «Guardado».

Email notifications

Saved versions: 0

import asyncio


class ToastSaveState(rx.State):
    saved_at: int = 0

    @rx.event
    async def save(self):
        yield rx.toast.loading("Saving settings…", id="toast-save")
        await asyncio.sleep(1)
        self.saved_at += 1
        yield rx.toast.success(
            "Settings saved",
            id="toast-save",
            description=f"Version {self.saved_at}",
            duration=3000,
        )


rx.card(
    rx.flex(
        rx.box(
            rx.text("Email notifications", weight="bold"),
            rx.text("Saved versions: ", ToastSaveState.saved_at, size="2", color_scheme="gray"),
        ),
        rx.spacer(),
        rx.button("Save", on_click=ToastSaveState.save),
        align="center",
        spacing="3",
    ),
    max_width="420px",
)

Notas del taller

rx.toast("texto", ...) es un evento. Se pone en on_click o se hace yield·return desde un handler.
Aspecto: description · position · duration · close_button · invert; botones: dicts action · cancel.
Tipos: success · error · warning · info · loading; cerrar: rx.toast.dismiss(id).
Si vuelves a enviar con el mismo id, ese aviso cambia (carga → completado).
El toaster ya viene en rx.App. Los valores por defecto de toda la app, con rx.App(toaster=rx.toast.provider(...)).

← Anterior

Superposiciones · Context Menu

Renderizado dinámico · Cond

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