コンポーネント工房：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
Reflex公式ライブラリのコンポーネント100個を1ページに1つずつ。プロパティを変えると画面とPythonコードが一緒に変わる実習台で身につけるコンポーネント図鑑
Reflexの公式ライブラリには、ボタンからチャート、データテーブル、ダイアログまで100個のコンポーネントがあります。この講座は、その100個を1ページに1つずつ取り上げるコンポーネント図鑑です。
あなたは今日から「コンポーネント工房」の見習いです。工房には画面部品の注文が届き、ページごとに注文書が1枚ついています。そのコンポーネントを学び終えたら、注文書の部品を自分で作ってみましょう。
100 parts, one page each
rx.card(
rx.flex(
rx.avatar(fallback="RX", color_scheme="indigo"),
rx.box(
rx.heading("Component Workshop", size="3"),
rx.text("100 parts, one page each", size="2", color_scheme="gray"),
),
rx.spacer(),
rx.button(rx.icon("hammer"), "Start", size="2"),
spacing="3",
align="center",
),
width="100%",
)rx. の名前と、公式ドキュメントへのリンク。工房の注文書
例：「決済画面に、目立つ購入ボタンを1つと、控えめなキャンセルボタンを1つ。」こんな注文がページごとに1つずつついています。
| 棚 | 数 | 中身 |
|---|---|---|
| レイアウト | 13 | Box, Flex, Stack, Grid, Container, Card … 画面の骨組み |
| タイポグラフィ | 10 | Text, Heading, Link, Code, Markdown … 文字 |
| フォーム | 10 | Button, Input, Checkbox, Select, Slider, Form, Upload … 入力を受け取る |
| データ表示 | 11 | Badge, Avatar, Icon, Callout, Progress … 情報を見せる |
| 開閉と切り替え | 3 | Tabs, Accordion, Segmented Control |
| オーバーレイ | 9 | Tooltip, Popover, Dialog, Drawer, Dropdown Menu, Toast … 上に重なって表示されるもの |
| 動的レンダリング | 4 | Cond, Match, Foreach, Auto Scroll：Stateに応じて変わる画面 |
| メディア | 3 | Image, Audio, Video |
| 表とデータグリッド | 3 | Table, Data Table, Data Editor |
| チャート | 12 | Area, Bar, Line, Pie, Radar, Scatter, Sankey …（Recharts） |
| チャートの部品 | 7 | Axis, Grid, Tooltip, Legend, Label, Reference, Brush |
| ほかのチャートライブラリ | 2 | Plotly, Pyplot |
| HTML要素 | 7 | rx.el で使う素のHTMLタグ |
| そのほかの道具 | 6 | Theme, Skeleton, Clipboard, Html Embed, Script, Memo |
順番に読む必要はありません。必要なコンポーネントを左の一覧から直接開いてください。初めてなら、レイアウトとフォームから見るのがおすすめです。
工房ノート
1ページ = コンポーネント1つ。上に実際の画面、下にそのコード。
「プロパティを変えてみる」で値を変えると、コードも一緒に変わる。気に入った組み合わせはそのままコピーして使えばいい。
Stateが必要な例では、Stateクラスまで一緒に見せる。
新しい授業・講座のお知らせを受け取る
この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。
R
ReflexKR
触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。
ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する
アフィリエイトと支援について© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
質問と回答
この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。