ReflexKR

Reflex公式ドキュメント

コンポーネント工房：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

レイアウト

Fragment

rx.fragment

公式ドキュメント

工房の注文書

Gridのマスにカードを直接入れたいのですが、条件に応じてカード2枚をまとめて出したり消したりしたいです。

rx.fragment は、複数のコンポーネントを1つにまとめますが、画面には包む要素を残しません。ReactのFragmentと同じです。文法上コンポーネントが1つしか入らない場所（rx.cond の片方の分岐、rx.foreach が返す値、関数の戻り値）に、複数を入れたいときに使います。包む div がないので、外側のFlex・Gridの組み立てが崩れません。

Component1

Component2

rx.fragment(rx.text("Component1"), rx.text("Component2"))

Stateで動かしてみる

Fragmentには目に見えるプロパティがないので、実習台の代わりにStateで動かしてみます。rx.cond の片方の分岐にはコンポーネントが1つしか入らないので、カード2枚をFragmentでまとめて一緒に出し入れします。2枚のカードはGridのマスに直接入ります。

Show cards 4 and 5

Card 1

Card 2

Card 3

class FragmentExtraState(rx.State):
    show_extra: bool = False

    @rx.event
    def set_show_extra(self, value: bool):
        self.show_extra = value


rx.vstack(
    rx.hstack(
        rx.switch(checked=FragmentExtraState.show_extra, on_change=FragmentExtraState.set_show_extra),
        rx.text("Show cards 4 and 5"),
        align="center",
    ),
    rx.grid(
        rx.card("Card 1"),
        rx.card("Card 2"),
        rx.card("Card 3"),
        rx.cond(
            FragmentExtraState.show_extra,
            rx.fragment(rx.card("Card 4"), rx.card("Card 5")),
        ),
        columns="3",
        spacing="2",
        width="100%",
    ),
    width="100%",
)

プロパティ	値	既定値	用途
`*children`	複数のコンポーネント	なし	まとめる子。包む要素なしでそのまま描画される

Fragmentは画面に残る要素がないので、スタイル（width, padding …）や on_click のようなイベントを指定する場所がありません。渡しても効果はなく、Reactが警告を出します。スタイルが必要なら rx.box で包みます。

Boxで包んだ場合との比較

どちらのGridもカード2・3を1つにまとめています。左はFragmentなので、2と3がそれぞれ1マスずつ占めます。右はBoxなので、2と3が1つのマスの中に上下に積み重なり、4の位置も変わります。

rx.flex(
    rx.grid(
        rx.card("1"),
        rx.fragment(rx.card("2"), rx.card("3")),
        rx.card("4"),
        columns="2",
        spacing="2",
        width="45%",
    ),
    rx.grid(
        rx.card("1"),
        rx.box(rx.card("2"), rx.card("3")),
        rx.card("4"),
        columns="2",
        spacing="2",
        width="45%",
    ),
    justify="between",
    align="start",
    width="100%",
)

foreachや関数から複数を返す

rx.foreach の関数は、項目ごとにコンポーネントを1つ返す必要があります。名前と価格のように2マス分を返したいなら、Fragmentでまとめます。すると外側の columns="2" のGridが、名前を左のマスに、価格を右のマスに順に置き、表のように揃います。

Coffee

Tea

Cake

class FragmentMenuState(rx.State):
    items: list[list[str]] = [["Coffee", "$3"], ["Tea", "$2"], ["Cake", "$5"]]


def fragment_menu_row(row):
    return rx.fragment(
        rx.text(row[0]),
        rx.text(row[1], text_align="right", weight="bold"),
    )


rx.grid(
    rx.foreach(FragmentMenuState.items, fragment_menu_row),
    columns="2",
    spacing_y="2",
    width="200px",
)

注文書を仕上げる

会員ならカードをあと2枚見せ、そうでなければ案内のカード1枚を2マスにまたがって置きます。rx.cond の最初の分岐がFragmentなので、2枚のカードがGridのマスに直接入ります。

Mug

Plate

Gold mug

Gold plate

class FragmentOrderState(rx.State):
    members_only: bool = True

    @rx.event
    def toggle_members(self):
        self.members_only = not self.members_only


rx.vstack(
    rx.button(
        rx.cond(FragmentOrderState.members_only, "Show public view", "Show member view"),
        on_click=FragmentOrderState.toggle_members,
        variant="soft",
    ),
    rx.grid(
        rx.card("Mug"),
        rx.card("Plate"),
        rx.cond(
            FragmentOrderState.members_only,
            rx.fragment(rx.card("Gold mug"), rx.card("Gold plate")),
            rx.card("Members get two more items", grid_column="span 2"),
        ),
        columns="2",
        spacing="2",
        width="100%",
        max_width="320px",
    ),
)

工房ノート

rx.fragment(a, b)は、包む要素なしで複数のコンポーネントを1つにまとめる。
rx.condの片方の分岐、rx.foreachの戻り値、関数の戻り値に複数を入れるときに使う。
包むdivがないので、外側のFlex・Gridのマスの配置がそのまま保たれる。
残る要素がないので、スタイル・イベントは指定できない。必要ならrx.box。

← 前へ

レイアウト · Aspect Ratio

タイポグラフィ · Text

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

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

Built with Reflex