ReflexKR

Reflex 官方文档

组件工坊：Reflex 组件库 100 例

课程概览

布局

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

排版

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

表单

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

数据展示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

展开与切换

Tabs

Accordion

Segmented Control

浮层

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

动态渲染

Cond

Match

Foreach

Auto Scroll

媒体

Image

Audio

Video

表格与数据网格

Table

Data Table

Data Editor

图表

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

图表部件

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

其他图表库

Plotly

Pyplot

HTML 元素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

其他工具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

组件工坊：Reflex 组件库 100 例

浮层

Toast

rx.toastrx.toast.provider

官方文档

工坊订单

在设置页面点击「保存」时，在屏幕角落显示一条通知：先显示「保存中…」，完成后变成「已保存」。

rx.toast 是在屏幕角落短暂出现、然后自动消失的通知。与对话框不同，它不会打断手头的操作，适合「已保存」这类只需告知结果的时刻。rx.toast(...) 不是组件，而是事件。可以直接放进按钮的 on_click，也可以在事件处理器中用 yield 或 return 返回。

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

试着改属性

通知的外观和行为通过关键字参数传给 rx.toast。改完值后点击按钮看看。duration 是自动关闭前的时长（毫秒）。

试着改属性

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 是通知堆叠的角落，close_button 是关闭（×）按钮，invert 会在浅色页面上显示深色通知。

选项	取值	用途
`description`	字符串	标题下方的小字说明
`title`	字符串	标题（0.10 新增，可以代替第一个参数）
`position`	`"top-left"` `"top-center"` `"top-right"` `"bottom-left"` `"bottom-center"` `"bottom-right"`	通知出现的角落
`duration`	毫秒	自动关闭前的时长（sonner 默认 4000）
`close_button`	`True` / `False`	显示关闭（×）按钮
`invert`	`True` / `False`	浅色页面上显示深色通知，反之亦然
`important`	`True` / `False`	让屏幕阅读器更优先地朗读
`dismissible`	`True` / `False`	为 `False` 时不能滑动清除
`action` · `cancel`	`{"label": 文字, "on_click": 事件}`	主按钮 · 次按钮。点击后通知关闭
`id`	字符串	通知的名称。用同一个 id 再次发送，会更新那条通知
`unstyled` · `style` · `class_name`	-	关闭默认样式、自定义样式
`on_dismiss`	事件	点击关闭按钮或滑动清除时
`on_auto_close`	事件	超过 `duration` 自动关闭时

按类型区分的函数有 rx.toast.success、rx.toast.error、rx.toast.warning、rx.toast.info、rx.toast.loading，关闭通知的事件是 rx.toast.dismiss(id)。

从 State 发送

事件处理器完成工作后，可以用 yield rx.toast(...) 发送通知。下面的处理器假装获取数据，等待 1 秒后弹出通知。在 async 处理器中使用 await asyncio.sleep，等待期间服务器可以去处理别的事情。

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)

带按钮的通知

给 action 和 cancel 传入包含 label 和 on_click 的 dict，通知里就会出现按钮。点击按钮会执行对应事件并关闭通知。点击关闭（×）或向旁边滑动清除时调用 on_dismiss，时间到了自动关闭时调用 on_auto_close。在下方的记录里看看调用的是哪个事件。

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",
)

预设类型

成功、错误、警告、信息都有对应的函数，图标和颜色已经定好。Reflex 默认的通知区设置了 rich_colors=True，所以不同类型的背景色也不一样。

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",
)

0.10 中还有 rx.toast.loading 和 rx.toast.dismiss。加载通知不会自动关闭，所以要用同一个 id 发送另一条通知来替换它，或用 rx.toast.dismiss 关闭。像 rx.toast.dismiss() 这样不带 id 调用，会关闭所有通知。

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",
)

自定义样式

如果预设类型的外观不合适，就给 style 传入 CSS 自己设计。position 也可以为每条通知单独设定。

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",
        },
    ),
)

通知区：rx.toast.provider

要弹出通知，应用中必须有一个通知区（rx.toast.provider）。Reflex 0.10 的 rx.App 默认在 toaster 设置中放好了通知区，所以通常不需要另外添加（官方文档的说法是它包含在 overlay_component 里）。想修改整个应用的通知默认值，就在创建 rx.App 时传入通知区。由于这会影响整个网站，本页只展示代码。

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

通知区属性	用途
`position`	默认位置（Reflex 默认 `"bottom-right"`）
`rich_colors`	按类型区分背景色（Reflex 默认 `True`）
`expand`	展开显示堆叠的通知（Reflex 默认 `True`）
`close_button`	给所有通知加关闭按钮（默认 `False`）
`visible_toasts` · `gap` · `offset`	同时显示的数量、通知间距、与屏幕边缘的距离
`theme` · `invert` · `dir`	明暗（默认跟随网站的颜色模式）、反转、文字方向
`hotkey`	把焦点移到通知区的快捷键
`toast_options`	所有通知的默认选项（`rx.toast.options(...)`）
`loading_icon` · `pause_when_page_is_hidden`	加载图标、标签页被隐藏时暂停计时

完成订单

保存处理器先发送一条加载通知，完成工作后再用同一个 id 发送成功通知。这样通知不会越堆越多，而是从「保存中…」直接变成「已保存」。

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",
)

工坊笔记

rx.toast("文字", ...) 是事件。放进 on_click，或在事件处理器中 yield · return。
外观：description · position · duration · close_button · invert；按钮：action · cancel 的 dict。
类型：success · error · warning · info · loading；关闭：rx.toast.dismiss(id)。
用同一个 id 再次发送，会更新那条通知（加载中 → 完成）。
rx.App 默认自带通知区。整个应用的默认值用 rx.App(toaster=rx.toast.provider(...)) 设置。

← 上一课

浮层 · Context Menu

下一课 →

动态渲染 · Cond

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex