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

レイアウト

Section

rx.section

公式ドキュメント

工房の注文書

紹介ページを「機能」「料金」のようなまとまりに分け、まとまりごとに上下の余白をたっぷりとってください。

rx.section は、ページの内容のひと区切りを表します。HTMLの <section> 要素として描画され、既定で上下に内側の余白が入ります。何よりも意味を表すコンポーネントなので、見出し1つとそれに続く文章のように、互いに関連する内容をひとまとまりにするときに使います。

First

This is the first content section

Second

This is the second content section

rx.box(
    rx.section(
        rx.heading("First", as_="h2", size="4"),
        rx.text("This is the first content section"),
        padding_x="12px",
        background_color="var(--gray-2)",
    ),
    rx.section(
        rx.heading("Second", as_="h2", size="4"),
        rx.text("This is the second content section"),
        padding_x="12px",
        background_color="var(--gray-3)",
    ),
    width="100%",
)

プロパティを変えてみる

Sectionのプロパティは size の1つだけで、上下の余白の大きさを決めます。点線の間の空きが変わるのを見てください。

プロパティを変えてみる

Features

Vertical padding comes from the size prop.

size

rx.box(
    rx.section(
        rx.heading("Features", as_="h2", size="4"),
        rx.text("Vertical padding comes from the size prop."),
        size="2",
        padding_x="12px",
        background_color="var(--accent-2)",
        border_top="1px dashed var(--accent-8)",
        border_bottom="1px dashed var(--accent-8)",
    ),
    width="100%",
)

size 1は24px、2は40px、3は64pxの上下の余白です。左右の余白はないので、padding_xで別に指定します。

プロパティ	値	既定値	用途
`size`	`"1"`(24px) `"2"`(40px) `"3"`(64px)	`"2"`	上下の内側の余白
`padding_x` などのCSS	CSSの長さ	なし	左右の余白は既定ではない

size は rx.breakpoints(...) で画面幅ごとに変えられます。Radix Themesには size="4"（80px）もありますが、インストールされている0.10の rx.section は "1"~"3" しか受け付けません。

3つのサイズ

サイズだけが違うSectionを3つ並べました。文字は同じで、上下の余白だけが変わります。

size 1

size 2

size 3

rx.flex(
    rx.section(rx.text("size 1"), size="1", padding_x="12px", background_color="var(--gray-3)"),
    rx.section(rx.text("size 2"), size="2", padding_x="12px", background_color="var(--gray-4)"),
    rx.section(rx.text("size 3"), size="3", padding_x="12px", background_color="var(--gray-5)"),
    spacing="3",
    align="start",
    width="100%",
)

画面幅ごとに余白を変える

スマートフォンでは余白を減らし、広い画面では増やしたいときは、size に rx.breakpoints を渡します。

Small padding on phones, more on wide screens

rx.section(
    rx.text("Small padding on phones, more on wide screens"),
    size=rx.breakpoints(initial="1", md="3"),
    padding_x="12px",
    background_color="var(--gray-3)",
    width="100%",
)

Boxと何が違うのか

rx.box は意味を持たない <div> で、rx.section は「ここからひと区切り」という意味を持つ <section> です。スクリーンリーダーや検索エンジンは、この区別を文書の構造として読み取ります。区切りごとに rx.heading で見出しをつけると、構造がよりはっきりします。ページ全体の幅を rx.container で収め、その中をSectionで分けるのがよくある組み方です。

注文書を仕上げる

Containerで本文の幅を収め、「機能」と「料金」をそれぞれSectionに分けました。間の rx.separator() が区切りの境目を示します。

Features

Pure Python, from the front end to the back end.

Pricing

Free to start. Pay when your app grows.

rx.container(
    rx.section(
        rx.heading("Features", as_="h2", size="5"),
        rx.text("Pure Python, from the front end to the back end."),
        size="2",
    ),
    rx.separator(),
    rx.section(
        rx.heading("Pricing", as_="h2", size="5"),
        rx.text("Free to start. Pay when your app grows."),
        size="2",
    ),
    size="2",
    width="100%",
)

工房ノート

rx.sectionは<section>要素。関連する内容をひと区切りにまとめる、意味のためのコンポーネント。
size "1"~"3"は上下の余白24・40・64px。既定は"2"。
左右の余白はないので、padding_xで別に指定する。
区切りごとにrx.headingで見出しをつける。
rx.containerで幅を収め、その中をrx.sectionで分ける。

← 前へ

レイアウト · Container

レイアウト · Center

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex