ReflexKR

컴포넌트 공방: 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

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.