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

데이터 표시

Callout

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

공식 문서

공방 주문서

결제 화면 위쪽에 '카드가 거절되었습니다' 경고를 눈에 띄게 띄우고, 그 아래에 배송 안내를 조용히 붙여 주세요.

rx.callout은 사용자의 눈길을 끌어야 하는 짧은 안내문입니다. 첫 인자로 글을, icon으로 앞에 붙일 아이콘 이름을 넘깁니다. 아이콘 이름은 Icon 페이지의 Lucide 이름을 그대로 씁니다.

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

속성 바꿔 보기

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로 크기를, variant로 채우는 방식을, color_scheme으로 색을 고릅니다. icon 이름을 바꾸면 앞의 아이콘이 바뀝니다.

속성	값	기본값	쓰임
첫 인자 (`text`)	글	필수	안내 문장
`icon`	Lucide 아이콘 이름	없음	앞에 붙일 아이콘. 주지 않으면 아이콘 없이 글만
`size`	`"1"` `"2"` `"3"`	`"2"`	글자 크기와 안쪽 여백
`variant`	`"soft"` `"surface"` `"outline"`	`"soft"`	채우는 방식
`color_scheme`	Radix 색 이름	테마 색	안내의 성격을 담는 색
`high_contrast`	`True` / `False`	`False`	대비를 더 크게
`role`	`"alert"` 등	없음	화면 읽기 프로그램에 알리는 역할

경고로 쓰기

빨간색에 경고 아이콘을 붙이고 role="alert"를 주면, 화면 읽기 프로그램도 이 글을 즉시 읽어 줍니다. 오류나 접근 거부처럼 바로 알려야 하는 내용에 씁니다.

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

크기와 variant

size는 "1"~"3"입니다. 큰 숫자일수록 글자와 여백이 커집니다.

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는 기본값 "soft"(옅은 배경), "surface"(옅은 배경과 테두리), "outline"(테두리만) 세 가지입니다.

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_scheme은 테마와 상관없이 안내의 색을 정합니다. 성공·주의·실패를 색으로 나누면 글을 읽기 전에 성격이 보입니다.

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는 글자를 더 진하게 해 대비를 키웁니다.

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

부품으로 직접 조립하기

rx.callout("글", icon=…)은 사실 세 부품을 한 번에 만드는 지름길입니다. rx.callout.root 안에 rx.callout.icon(아이콘 자리)과 rx.callout.text(글 자리)를 넣으면 같은 모양이 됩니다. 글 가운데 링크를 넣거나 아이콘에 따로 속성을 주고 싶을 때 이렇게 조립합니다. 모양 속성(size, variant, color_scheme, high_contrast)은 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",
)

주문서 완성

결제 거절은 빨간 경고로 크게, 배송 안내는 surface와 작은 크기로 조용히 둡니다.

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

공방 노트

rx.callout("글", icon="info")로 짧은 안내문을 만든다.
size "1"~"3", variant: soft(기본) · surface · outline, color_scheme으로 성격을 나타낸다.
바로 알려야 하는 오류는 color_scheme="red"와 role="alert".
글 안에 링크 등을 넣으려면 callout.root + callout.icon + callout.text로 조립한다.

← 이전

데이터 표시 · Icon

데이터 표시 · List

새 교시·새 강의 소식 받기

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

질문과 답변

이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.

ReflexKR

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

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

Built with Reflex