コンポーネント工房：Reflexライブラリ100
·
講座の概要
レイアウト
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
タイポグラフィ
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
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
工房の注文書
決済画面の上部に「カードが拒否されました」という警告を目立つように出し、その下に配送の案内を控えめに添えてください。
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)| プロパティ | 値 | 既定値 | 用途 |
|---|---|---|---|
最初の引数（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",
)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"（枠線だけ）の3つです。
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=…)は、実は3つのパーツを一度に作る近道です。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で組み立てる。
新しい授業・講座のお知らせを受け取る
この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。
R
ReflexKR
触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。
ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する
アフィリエイトと支援について© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
質問と回答
この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。