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

タイポグラフィ

Text

rx.textrx.text.em

公式ドキュメント

工房の注文書

商品カードに、太字の商品名、小さなグレーの説明、大きく目立たせた価格を入れてください。

rx.text は画面に文字を置くための、いちばん基本的な部品です。既定では <span> タグになり、サイズ・太さ・揃え・色をプロパティで決めます。説明文、ラベル、数字など、見出し以外のあらゆる文字に使います。

The quick brown fox jumps over the lazy dog.

rx.text("The quick brown fox jumps over the lazy dog.")

プロパティを変えてみる

文字の見た目は下のプロパティで決まります。align は、文字が1行全体を占めるブロック（p、div）のときにだけ目に見えます。

プロパティを変えてみる

The quick brown fox jumps over the lazy dog.

label

as_

size

weight

align

trim

color

high_contrast

rx.text("The quick brown fox jumps over the lazy dog.", as_="p", size="3", weight="regular", align="left", trim="normal", color_scheme="gray", high_contrast=False)

as_ を span に変えると、align の効果が見えなくなります。span は文字の幅しか占めないからです。

プロパティ	値	既定値	用途
`as_`	`"p"` `"label"` `"div"` `"span"` `"b"` `"i"` `"u"` `"abbr"` `"cite"` `"del"` `"em"` `"ins"` `"kbd"` `"mark"` `"s"` `"samp"` `"sub"` `"sup"`	`"span"`	実際に生成される HTML タグ。見た目は変わらない
`size`	`"1"` ~ `"9"`	継承	文字サイズと行間、字間
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	継承	太さ
`align`	`"left"` `"center"` `"right"`	継承	ブロック内での揃え
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	文字の上下にある行間の余白を切り取る
`color_scheme`	Radix の色名	テーマ色	文字色
`high_contrast`	`True` / `False`	`False`	背景とのコントラストを強める
`as_child`	`True` / `False`	`False`	子要素をそのまま使い、文字スタイルだけを適用

size・weight・align・trim には画面幅ごとの値（{"initial": "2", "md": "4"}）も渡せます。イベントは on_click などの基本イベントだけです。

as_：意味だけを変える

as_ は生成されるタグだけを変えます。下の4行はそれぞれ p、label、div、span ですが、見た目は同じです。段落なら p、入力欄の名前なら label のように意味に合ったタグを選ぶと、スクリーンリーダーや検索エンジンが内容を正しく理解しやすくなります。

This is a paragraph element.

This is a label element.

This is a div element.

This is a span element.

rx.flex(
    rx.text("This is a ", rx.text.strong("paragraph"), " element.", as_="p"),
    rx.text("This is a ", rx.text.strong("label"), " element.", as_="label"),
    rx.text("This is a ", rx.text.strong("div"), " element.", as_="div"),
    rx.text("This is a ", rx.text.strong("span"), " element.", as_="span"),
    direction="column",
    spacing="3",
)

サイズ、太さ、揃え

size は文字サイズだけでなく、行間と字間もあわせて調整します。文字が大きくなるほど、相対的な行間と字間は狭くなります。長い本文には 2〜4、ボタン横のラベルのような UI の文字には 1〜3 が合います。

Size 1: captions and hints

Size 2: UI labels

Size 3: body text

Size 5: lead paragraph

Size 7: big numbers

Size 9: hero

rx.flex(
    rx.text("Size 1: captions and hints", size="1"),
    rx.text("Size 2: UI labels", size="2"),
    rx.text("Size 3: body text", size="3"),
    rx.text("Size 5: lead paragraph", size="5"),
    rx.text("Size 7: big numbers", size="7"),
    rx.text("Size 9: hero", size="9"),
    direction="column",
    spacing="3",
)

Light

Regular

Medium

Bold

Left-aligned

Center-aligned

Right-aligned

rx.flex(
    rx.text("Light", weight="light", as_="div"),
    rx.text("Regular", weight="regular", as_="div"),
    rx.text("Medium", weight="medium", as_="div"),
    rx.text("Bold", weight="bold", as_="div"),
    rx.separator(),
    rx.text("Left-aligned", align="left", as_="div"),
    rx.text("Center-aligned", align="center", as_="div"),
    rx.text("Right-aligned", align="right", as_="div"),
    direction="column",
    spacing="3",
    width="100%",
)

trim：ボックス内の余白を揃える

文字の上下には、行間ぶんの見えない余白が付いています。そのため同じ padding を指定しても、上下が左右より広く見えます。trim はその余白を切り取ります。"start" は上側、"end" は下側、"both" は両側です。カードのように枠線のあるボックスで違いがよくわかります。

Without trim

Typography relates font size, line height and line width.

With trim

Typography relates font size, line height and line width.

rx.flex(
    rx.box(
        rx.heading("Without trim", as_="h2", size="3", margin_bottom="4px"),
        rx.text("Typography relates font size, line height and line width."),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    rx.box(
        rx.heading("With trim", as_="h2", size="3", margin_bottom="4px", trim="start"),
        rx.text("Typography relates font size, line height and line width.", trim="end"),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

色とコントラスト

color_scheme を指定すると、テーマの既定色の代わりにその色を使います。high_contrast=True を加えると同じ色系統でより濃い文字になり、背景とはっきり区別できます。左が既定、右が高コントラストです。

indigo

crimson

orange

rx.grid(
    rx.text("indigo", color_scheme="indigo"),
    rx.text("indigo", color_scheme="indigo", high_contrast=True),
    rx.text("crimson", color_scheme="crimson"),
    rx.text("crimson", color_scheme="crimson", high_contrast=True),
    rx.text("orange", color_scheme="orange"),
    rx.text("orange", color_scheme="orange", high_contrast=True),
    columns="2",
    spacing="2",
)

ほかの文字部品と組み合わせる

rx.text の子として文字列と rx.link、rx.text.em、rx.code、rx.text.kbd を混ぜて入れると、1つの文の中で一部だけ見た目を変えられます。

ブラウザは連続した空白を1つにまとめます。空白をそのまま表示したいときは CSS プロパティ white_space="pre" を指定します。下の2行目と3行目を比べてみてください。

Look, such a helpful link, an italic emphasis, a piece of computer code, and a hotkey Shift + A within the text.

This is not pre formatted

This is pre formatted

rx.flex(
    rx.text(
        "Look, such a helpful ",
        rx.link("link", href="#"),
        ", an ",
        rx.text.em("italic emphasis"),
        ", a piece of computer ",
        rx.code("code"),
        ", and a hotkey ",
        rx.text.kbd("Shift + A"),
        " within the text.",
        size="4",
    ),
    rx.text("This is not pre     formatted"),
    rx.text("This is pre     formatted", white_space="pre"),
    direction="column",
    spacing="3",
)

チェックボックスと1行に

as_="label" の rx.text の中にチェックボックス・ラジオ・スイッチを入れると、コントロールが文字の1行目の高さに揃います。文章が複数行になっても同じです。ラベルなので、文字をクリックしてもチェックボックスが切り替わります。

I understand that these documents are confidential and cannot be shared with a third party.

rx.box(
    rx.text(
        rx.flex(
            rx.checkbox(default_checked=True),
            "I understand that these documents are confidential and cannot be shared with a third party.",
            spacing="2",
        ),
        as_="label",
        size="3",
    ),
    max_width="300px",
)

注文書を仕上げる

名前は太く、説明は小さくグレーに、価格は大きく色を付けて、3段階に分けます。カードの上端と下端の文字には trim を指定して余白を均等に揃えます。

Linen Shirt

Breathable linen, relaxed fit. Machine washable.

$49.00

rx.card(
    rx.flex(
        rx.text("Linen Shirt", size="4", weight="bold", trim="start"),
        rx.text("Breathable linen, relaxed fit. Machine washable.", size="2", color_scheme="gray"),
        rx.text("$49.00", size="6", weight="bold", color_scheme="indigo", trim="end"),
        direction="column",
        spacing="2",
    ),
    max_width="320px",
)

工房ノート

rx.text は既定で span。as_ で p・label・div など意味に合ったタグを選ぶ（見た目は変わらない）。
size "1"〜"9" は行間・字間まで調整する。本文は 2〜4、UI ラベルは 1〜3。
align は p・div のようなブロックのときだけ見える。trim でボックス内の上下の余白を揃える。
color_scheme で色を、high_contrast でコントラストを。空白を保つには white_space="pre"。
子に rx.link・rx.code・rx.text.em・rx.text.kbd を混ぜて1つの文を飾る。

← 前へ

レイアウト · Fragment

タイポグラフィ · Heading

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex