コンポーネント工房：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
工房の注文書
商品一覧の上に「グリッド / リスト」の表示切り替えを付け、選んだほうの形で商品を見せてください。
セグメンテッドコントロールは、決まったいくつかの値や画面からひとつを選ぶボタンのまとまりです。「Inbox / Drafts / Sent」のように、ひとつだけがオンになる選択をはっきり見せます。ドロップダウンは選んだ値しか見えず、ボタンを何個も並べるとどれがオンなのかわかりにくいのに対し、セグメンテッドコントロールは選択肢全体と今選んでいるものを一緒に見せます。
rx.segmented_control.rootがrx.segmented_control.itemをまとめ、各itemは表示する文字と一意のvalueを持ちます。
rx.segmented_control.root(
rx.segmented_control.item("Inbox", value="inbox"),
rx.segmented_control.item("Drafts", value="drafts"),
rx.segmented_control.item("Sent", value="sent"),
default_value="inbox",
)プロパティを変えてみる
size
variant
color
radius
rx.segmented_control.root(
rx.segmented_control.item("Inbox", value="inbox"),
rx.segmented_control.item("Drafts", value="drafts"),
rx.segmented_control.item("Sent", value="sent"),
default_value="inbox",
size="2",
variant="surface",
color_scheme="indigo",
radius="medium",
)| パーツ | プロパティ | 値 | 用途 |
|---|---|---|---|
root | default_value | itemのvalue | 最初に選ばれている値（非制御） |
root | value + on_change | Stateの値、イベント | 選んだ値をStateで扱う（制御） |
root | type | "single"（既定） "multiple" | ひとつだけ選ぶか、複数選ぶか |
root | size | "1" "2"（既定） "3" | 大きさ |
root | variant | "surface"（既定） "classic" | 下地の形 |
root | color_scheme · radius | Radixの色名、角の値 | 色と角 |
item | value | 文字列（一意） | この枠の値 |
公式ドキュメントの基本の例のように、valueにStateの値を、on_changeにその値を変えるイベントをつなぎます。枠を選ぶとon_changeが選んだitemのvalueを渡し、Stateが変わると画面のほかの場所も一緒に変わります。ここでは選んだ値で文字の揃え方を変えています。
on_changeはtypeによって文字列か文字列のリストを渡すので、ハンドラの引数の型はstr | list[str]と書く必要があります。strだけにすると、Reflexが型が合わないというエラーを出します。
Aligned left
class SegmentedAlignState(rx.State):
control: str = "left"
@rx.event
def set_segmented_align(self, value: str | list[str]):
if isinstance(value, str):
self.control = value
rx.vstack(
rx.segmented_control.root(
rx.segmented_control.item("Left", value="left"),
rx.segmented_control.item("Center", value="center"),
rx.segmented_control.item("Right", value="right"),
value=SegmentedAlignState.control,
on_change=SegmentedAlignState.set_segmented_align,
),
rx.card(
rx.text("Aligned " + SegmentedAlignState.control, align=SegmentedAlignState.control),
width="100%",
),
width="100%",
)type="multiple"なら複数の枠を同時にオンにでき、値はリストになります。itemの中には文字の代わりにアイコンを入れることもできます。下は太字・斜体・下線のボタンです。Reflex 0.10はコンポーネントを作るときにtypeが"multiple"かどうかを直接確かめるので、typeはStateの値ではなく固定の値で渡します。そのため実習台にも入れていません。
Sample text
value = bold
class SegmentedStyleState(rx.State):
styles: list[str] = ["bold"]
@rx.event
def set_segmented_styles(self, value: str | list[str]):
self.styles = [value] if isinstance(value, str) else list(value)
rx.vstack(
rx.segmented_control.root(
rx.segmented_control.item(rx.icon("bold", size=16), value="bold"),
rx.segmented_control.item(rx.icon("italic", size=16), value="italic"),
rx.segmented_control.item(rx.icon("underline", size=16), value="underline"),
type="multiple",
value=SegmentedStyleState.styles,
on_change=SegmentedStyleState.set_segmented_styles,
),
rx.text(
"Sample text",
weight=rx.cond(SegmentedStyleState.styles.contains("bold"), "bold", "regular"),
font_style=rx.cond(SegmentedStyleState.styles.contains("italic"), "italic", "normal"),
text_decoration=rx.cond(SegmentedStyleState.styles.contains("underline"), "underline", "none"),
),
rx.text("value = ", SegmentedStyleState.styles.join(", "), size="1", color_scheme="gray"),
)選んだ値に応じてrx.condでグリッドとリストを切り替えて見せます。itemにはアイコンと文字を一緒に入れました。
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
class SegmentedViewState(rx.State):
view: str = "grid"
@rx.event
def set_segmented_view(self, value: str | list[str]):
if isinstance(value, str):
self.view = value
rx.vstack(
rx.segmented_control.root(
rx.segmented_control.item(rx.icon("layout-grid", size=14), "Grid", value="grid"),
rx.segmented_control.item(rx.icon("list", size=14), "List", value="list"),
value=SegmentedViewState.view,
on_change=SegmentedViewState.set_segmented_view,
size="1",
),
rx.cond(
SegmentedViewState.view == "grid",
rx.grid(*[rx.card(rx.text("Item ", i), height="60px") for i in range(1, 7)], columns="3", spacing="2", width="100%"),
rx.vstack(*[rx.card(rx.text("Item ", i), width="100%") for i in range(1, 7)], spacing="2", width="100%"),
),
width="100%",
max_width="420px",
)工房ノート
segmented_control.rootの中にsegmented_control.item("テキスト", value=…)を入れる。
default_valueで非制御、value + on_changeでStateが扱う（制御）。
on_changeハンドラの引数の型はstr | list[str]。
type="multiple"なら複数の枠をオンにでき、値はリストになる。
size · variant（surface · classic） · color_scheme · radiusで見た目を決める。
新しい授業・講座のお知らせを受け取る
この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。
R
ReflexKR
触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。
ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する
アフィリエイトと支援について© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
質問と回答
この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。