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

レイアウト

Separator

rx.separatorrx.divider

公式ドキュメント

工房の注文書

プロフィールカードの名前の部分と連絡先の部分の間に、細い区切り線を入れてください。

rx.separator は、内容の間に細い線を引いてまとまりを分けます。目に見える区切りであると同時に、必要ならスクリーンリーダーにも「ここで分かれる」という意味を伝えます。rx.divider は同じコンポーネントの別名なので、どちらを使ってもかまいません。

Section 1

Section 2

rx.flex(
    rx.card("Section 1"),
    rx.separator(),
    rx.card("Section 2"),
    spacing="4",
    direction="column",
    align="center",
)

プロパティを変えてみる

縦線を見るには、orientation を vertical に、外側の direction を row に変えてください。縦線の長さは親の高さ（ここでは10rem）を基準に決まります。

プロパティを変えてみる

Section 1

Section 2

size

orientation

direction

color

rx.flex(
    rx.card("Section 1"),
    rx.separator(size="4", orientation="horizontal", color_scheme="gray"),
    rx.card("Section 2"),
    direction="column",
    spacing="4",
    align="center",
    width="100%",
    height="10rem",
)

sizeは線の長さ、orientationは向き、color_schemeは色です。directionは外側のFlexの方向です。

プロパティ	値	既定値	用途
`size`	`"1"`(16px) `"2"`(32px) `"3"`(64px) `"4"`(100%)	`"4"`	線の長さ
`orientation`	`"horizontal"` `"vertical"`	`"horizontal"`	横線・縦線
`color_scheme`	Radixの色名	`"gray"`	線の色
`decorative`	`True` / `False`	`True`	Trueなら飾りにすぎないので、アクセシビリティツリーから外れる。意味のある区切りならFalse

size と orientation は rx.breakpoints(...) で画面幅ごとに変えられます。Radix Themesの既定サイズは "1" ですが、インストールされている0.10の rx.separator は既定値を "4" にしているので、何も指定しなければ親いっぱいに広がります。

長さ：size

size="4" は親の幅（縦線なら高さ）いっぱいに広がります。CSSの width や height を "100%" にしても同じですが、size は向きに関係なく同じように動きます。"1"~"3" は固定の長さです。

rx.flex(
    rx.separator(size="1"),
    rx.separator(size="2"),
    rx.separator(size="3"),
    rx.separator(size="4"),
    direction="column",
    spacing="4",
    width="100%",
)

向き：orientation

orientation="vertical" なら縦線になります。縦線は、親に高さがないと size="4" で伸びることができません。公式ドキュメントにならって rx.divider の名前で書きました。

Section 1

Section 2

rx.flex(
    rx.card("Section 1"),
    rx.divider(orientation="vertical", size="4"),
    rx.card("Section 2"),
    spacing="4",
    width="100%",
    height="10vh",
)

文字の間の短い縦線

メニューのリンクの間のように1行の中で使うなら、size="1" の短い縦線が向いています。外側のFlexに align="center" を指定すると、線が文字の高さの真ん中にきます。

HomeBlogAbout

rx.flex(
    rx.link("Home", href="#"),
    rx.separator(orientation="vertical", size="1"),
    rx.link("Blog", href="#"),
    rx.separator(orientation="vertical", size="1"),
    rx.link("About", href="#"),
    spacing="3",
    align="center",
)

注文書を仕上げる

名前の部分と連絡先の部分の間に横線を置き、margin_y で上下にゆとりを持たせます。

Jamie Kim

Potter

jamie@example.com

555-0100

rx.card(
    rx.flex(
        rx.avatar(fallback="JK"),
        rx.box(rx.text("Jamie Kim", weight="bold"), rx.text("Potter", size="2", color="var(--gray-11)")),
        spacing="3",
        align="center",
    ),
    rx.separator(margin_y="12px"),
    rx.vstack(
        rx.hstack(rx.icon("mail", size=16), rx.text("jamie@example.com", size="2"), align="center"),
        rx.hstack(rx.icon("phone", size=16), rx.text("555-0100", size="2"), align="center"),
        spacing="2",
    ),
    width="260px",
)

工房ノート

rx.separator（= rx.divider）は内容の間に線を引く。
size "1"~"4" = 16・32・64px・100%。0.10の既定は"4"（いっぱいに広がる）。
orientation="vertical"なら縦線。親に高さがないと伸びない。
color_schemeで色を、decorative=Falseで意味のある区切りであることを伝える。

← 前へ

レイアウト · Spacer

レイアウト · Card

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex