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

レイアウト

Container

rx.container

公式ドキュメント

工房の注文書

ワイドモニターで文章が横にどこまでも広がらないよう、本文を読みやすい幅に収めてください。

rx.container は、内側の中身の最大幅を制限し、余った左右を余白にして中身を中央に置きます。画面が最大幅より狭ければ中身も一緒に狭くなるので、レスポンシブな画面に向いています。ふつうはページの本文全体を包みます。

This content is at most 448px wide.

rx.box(
    rx.container(
        rx.card("This content is at most 448px wide.", width="100%"),
        size="1",
    ),
    background_color="var(--gray-3)",
    width="100%",
)

プロパティを変えてみる

グレーの背景が外側の領域で、カードがContainerの内側です。このプレビュー欄は幅が狭いので、size 3・4は欄いっぱいに広がっているように見えます。

プロパティを変えてみる

Page content

size

padding

rx.box(
    rx.container(
        rx.card("Page content", width="100%"),
        size="1",
        padding="16px",
    ),
    background_color="var(--gray-3)",
    width="100%",
)

sizeが大きいほど内側の最大幅が広がります。paddingはReflexが既定で入れる内側の余白（16px）です。

プロパティ	値	既定値	用途
`size`	`"1"`(448px) `"2"`(688px) `"3"`(880px) `"4"`(1136px)	`"3"`	内側の中身の最大幅
`padding`	CSSの長さ	`"16px"`	内側の余白。Reflexの `create` が既定で入れる
`stack_children_full_width`	`True` / `False`	`False`	中のvstack・hstackと、その入力欄などの子を幅100%に

size は rx.breakpoints(...) で画面幅ごとに変えられます。padding と stack_children_full_width はRadixのプロパティではなく、インストールされている0.10の rx.container が追加している引数です。

4つのサイズ

公式ドキュメントの例です。それぞれのContainerが外側の幅の中で自分の最大幅まで広がり、中央に置かれます。

size 1: max 448px

size 2: max 688px

size 3: max 880px

size 4: max 1136px

rx.box(
    rx.container(rx.card("size 1: max 448px", width="100%"), size="1"),
    rx.container(rx.card("size 2: max 688px", width="100%"), size="2"),
    rx.container(rx.card("size 3: max 880px", width="100%"), size="3"),
    rx.container(rx.card("size 4: max 1136px", width="100%"), size="4"),
    background_color="var(--gray-3)",
    width="100%",
)

中のスタックをいっぱいに広げる

Stackは既定で子を align="start" で配置するので、入力欄は自分の幅しか占めません。stack_children_full_width=True を指定すると、Containerの中のスタックと、スタック直下の div・input・select・textarea・table の子が幅100%になります。ボタン（button 要素）は対象外です。左が既定、右がオンにしたものです。

rx.flex(
    rx.container(
        rx.vstack(rx.input(placeholder="Name"), rx.text_area(placeholder="Message")),
        size="1",
        background_color="var(--gray-3)",
    ),
    rx.container(
        rx.vstack(rx.input(placeholder="Name"), rx.text_area(placeholder="Message")),
        size="1",
        stack_children_full_width=True,
        background_color="var(--gray-3)",
    ),
    spacing="4",
    width="100%",
)

画面幅ごとにサイズを変える

スマートフォンでは狭く、広い画面では広く収めたいときは、size に rx.breakpoints を渡します。

1 on phones, 2 from md, 3 from lg

rx.box(
    rx.container(
        rx.card("1 on phones, 2 from md, 3 from lg", width="100%"),
        size=rx.breakpoints(initial="1", md="2", lg="3"),
    ),
    background_color="var(--gray-3)",
    width="100%",
)

注文書を仕上げる

1本の記事を size="2"（最大688px）に収めました。ワイドモニターでも1行が長くなりすぎず、読みやすくなります。

Notes from the workshop

Posted on Monday

A long line of text is hard to read. Keeping the column narrow helps the eye find the next line.

The container keeps this column narrow on wide screens.

rx.box(
    rx.container(
        rx.vstack(
            rx.heading("Notes from the workshop", size="6"),
            rx.text("Posted on Monday", size="2", color="var(--gray-11)"),
            rx.text(
                "A long line of text is hard to read. "
                "Keeping the column narrow helps the eye find the next line.",
            ),
            rx.text("The container keeps this column narrow on wide screens."),
            spacing="3",
        ),
        size="2",
        padding_y="24px",
    ),
    background_color="var(--gray-2)",
    width="100%",
)

工房ノート

rx.containerは中身の最大幅を制限して中央に置く。ページの本文を包むのに使う。
size "1"~"4" = 448・688・880・1136px。既定は"3"。
Reflexがpadding="16px"を既定で入れる。必要なら変える。
stack_children_full_width=Trueなら中のスタックと入力欄などの子が幅100%（ボタンは除く）。
size=rx.breakpoints(initial="1", lg="3")のように画面幅ごとに変えられる。

← 前へ

レイアウト · Grid

レイアウト · Section

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex