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

レイアウト

Box

rx.box

公式ドキュメント

工房の注文書

お知らせの一文を淡い背景と丸い角で囲み、本文とひと目で区別できるようにしてください。

rx.box は、もっとも基本となる箱です。HTMLの div をもとにしたブロック要素で、ほかのコンポーネントをまとめ、そのまとまりにスタイルをつけるのに使います。Box自体には固有のプロパティがなく、背景・余白・枠線といったCSSプロパティをキーワード引数で渡して形を作ります。

Hello

rx.box("Hello", background_color="var(--accent-3)", padding="12px", border_radius="8px")

プロパティを変えてみる

Boxの見た目はすべてCSSのスタイルプロパティで決めます。PythonではCSS名の - を _ に置き換えて書きます（background-color → background_color）。

プロパティを変えてみる

Box

label

background

padding

border

radius

width

align

rx.box(
    "Box",
    background_color="var(--accent-3)",
    padding="12px",
    border="none",
    border_radius="4px",
    width="50%",
    text_align="left",
)

背景、内側の余白、枠線、角、幅を変えてみてください。どれもCSSプロパティなので、値もCSSのまま書きます。

プロパティ	値	既定値	用途
`width` `height`	CSSの長さ（`"200px"`, `"50%"`）	中身に合わせる	箱の大きさ
`padding` `margin`	CSSの長さ。`padding_x`・`margin_top` のように分けても可	`0`	内側・外側の余白
`background_color` `background`	色名、`var(--tomato-3)`、グラデーション、`url(…)`	なし	背景色・背景画像
`border` `border_radius`	`"1px solid var(--gray-7)"`, `"8px"`	なし	枠線と角の丸み
`title`	文字	なし	マウスを乗せると出るヒント
`hidden` `role` `tab_index`	HTML属性	なし	非表示、アクセシビリティ上の役割、タブ順
`on_click` `on_mouse_enter` …	イベントハンドラー	なし	すべてのコンポーネントにある基本イベント

色の指定：CSSの色名とRadixの色

色は3通りの方法で指定できます。"orange" のようなCSSの色名、var(--tomato-3) のようなRadixの色変数（または同じ意味の rx.color("plum", 3)）、そしてサイトのテーマのアクセントカラーに従う var(--accent-2) です。Radixの色には1〜12の段階があり、数字が小さいほど背景向きの淡い色になります。

公式ドキュメントの例では最後の箱に radius="full" を渡していますが、Boxには radius プロパティがないので何の効果もありません。角を丸くするには border_radius を使います。

CSS color

Radix color

Theme color

rx.box(
    rx.box("CSS color", background_color="yellow", border_radius="2px", width="20%", margin="4px", padding="4px"),
    rx.box("CSS color", background_color="orange", border_radius="5px", width="40%", margin="8px", padding="8px"),
    rx.box("Radix color", background_color="var(--tomato-3)", border_radius="5px", width="60%", margin="12px", padding="12px"),
    rx.box("Radix color", background_color=rx.color("plum", 3), border_radius="10px", width="80%", margin="16px", padding="16px"),
    rx.box("Theme color", background_color="var(--accent-2)", border_radius="9999px", width="100%", padding="24px"),
    text_align="center",
    width="100%",
)

背景：グラデーションと画像

CSSの background プロパティ1つで、グラデーションや画像を敷けます。linear-gradient は線に沿って、radial-gradient は1点から広がるように色が変わります。画像は url(…) で入れ、center/cover で中央を基準に箱いっぱいに広げます。

rx.flex(
    rx.box(background="linear-gradient(45deg, var(--tomato-9), var(--plum-9))", width="25%", height="100%"),
    rx.box(background="linear-gradient(red, yellow, blue, orange)", width="25%", height="100%"),
    rx.box(background="radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%)", width="25%", height="100%"),
    rx.box(background="center/cover url('https://picsum.photos/id/1015/300/200')", width="25%", height="100%"),
    spacing="2",
    width="100%",
    height="100px",
)

イベントとHTML属性

Boxには、すべてのコンポーネントが持つ基本イベント（on_click, on_mouse_enter, on_mouse_leave など）があります。下の箱にマウスを乗せたり、クリックしたりしてみてください。title を指定すると、マウスを少し止めたときにヒントが出ます。

Move the pointer here

Clicks: 0

class BoxHoverState(rx.State):
    inside: bool = False
    clicks: int = 0

    @rx.event
    def enter(self):
        self.inside = True

    @rx.event
    def leave(self):
        self.inside = False

    @rx.event
    def click(self):
        self.clicks += 1


rx.box(
    rx.text(rx.cond(BoxHoverState.inside, "Pointer inside", "Move the pointer here")),
    rx.text("Clicks: ", BoxHoverState.clicks, size="1"),
    on_mouse_enter=BoxHoverState.enter,
    on_mouse_leave=BoxHoverState.leave,
    on_click=BoxHoverState.click,
    title="I am a box",
    background_color=rx.cond(BoxHoverState.inside, "var(--grass-4)", "var(--gray-3)"),
    padding="16px",
    border_radius="8px",
    cursor="pointer",
)

注文書を仕上げる

淡い背景と濃い左の枠線でお知らせだとわかるようにし、内側の余白で文字が枠線にくっつかないようにします。

Notice

The shop is closed on Monday.

rx.box(
    rx.hstack(
        rx.icon("megaphone", size=18, color="var(--amber-11)"),
        rx.text("Notice", weight="bold"),
        align="center",
    ),
    rx.text("The shop is closed on Monday.", size="2", margin_top="4px"),
    background_color="var(--amber-2)",
    border="1px solid var(--amber-6)",
    border_left="4px solid var(--amber-9)",
    border_radius="8px",
    padding="12px 16px",
    width="100%",
)

工房ノート

rx.boxはdivベースのブロックの箱。まとめてスタイルをつけるのに使う。
固有のプロパティはない。width・padding・background_color・border_radiusのようなCSSプロパティを_の名前で渡す。
色はCSSの色名、var(--tomato-3)またはrx.color("tomato", 3)、テーマのアクセントカラーvar(--accent-N)。
background 1つでグラデーション（linear・radial）とurl(…)の画像を敷く。
on_click・on_mouse_enterのような基本イベントと、title・hiddenのようなHTML属性も使える。

← 前へ

講座の概要

レイアウト · Flex

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex