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

タイポグラフィ

Code

rx.code

公式ドキュメント

工房の注文書

インストール案内の文中にあるコマンドとファイル名を、等幅フォントで区別してください。

rx.code は文中の短いコード、コマンド、ファイル名を、等幅フォントと薄い背景で表示します。HTML の <code> タグになります。複数行のコードやシンタックスハイライトが必要なら rx.code_block を使います。

console.log()

rx.code("console.log()")

プロパティを変えてみる

variant で背景と枠線の形を、size と weight で文字を、color_scheme で色を変えます。

プロパティを変えてみる

reflex run

label

variant

size

weight

color

high_contrast

rx.code("reflex run", variant="soft", size="3", weight="regular", color_scheme="indigo", high_contrast=False)

ghost は背景なしで、フォントと色だけが変わります。high_contrast は文字をより濃くします。

プロパティ	値	既定値	用途
`variant`	`"solid"` `"soft"` `"outline"` `"ghost"`	`"soft"`	背景・枠線の形
`size`	`"1"` ~ `"9"`	継承	文字サイズ
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	継承	太さ
`color_scheme`	Radix の色名	テーマ色	色
`high_contrast`	`True` / `False`	`False`	文字をより濃く

Reflex 0.10 の variant の型には "classic" と "surface" も含まれていますが、Radix の Code が見た目を定義しているのは上の4つです。イベントは基本イベントだけです。

4つの variant とコントラスト

左の列が既定、右の列が high_contrast=True です。本文中では soft がいちばん無難で、目立たせたいなら solid、背景を敷きたくなければ ghost を使います。

console.log()console.log()console.log()console.log()

rx.flex(
    rx.flex(
        rx.code("console.log()", variant="solid"),
        rx.code("console.log()", variant="soft"),
        rx.code("console.log()", variant="outline"),
        rx.code("console.log()", variant="ghost"),
        direction="column",
        align="start",
        spacing="2",
    ),
    rx.flex(
        rx.code("console.log()", variant="solid", high_contrast=True),
        rx.code("console.log()", variant="soft", high_contrast=True),
        rx.code("console.log()", variant="outline", high_contrast=True),
        rx.code("console.log()", variant="ghost", high_contrast=True),
        direction="column",
        align="start",
        spacing="2",
    ),
    spacing="5",
)

サイズと太さ

size は "1"〜"9" で、大きくなるほど相対的な行間と字間が狭くなります。文中に入れるときは、size を指定しなければ周りの文字のサイズに従います。

size 1size 3size 5size 7size 9lightregularmediumbold

rx.flex(
    rx.code("size 1", size="1"),
    rx.code("size 3", size="3"),
    rx.code("size 5", size="5"),
    rx.code("size 7", size="7"),
    rx.code("size 9", size="9"),
    rx.separator(),
    rx.code("light", weight="light"),
    rx.code("regular", weight="regular"),
    rx.code("medium", weight="medium"),
    rx.code("bold", weight="bold"),
    direction="column",
    spacing="3",
    align="start",
)

色

color_scheme でテーマ色の代わりに別の色を使います。エラーメッセージ中のコードは red、中立的なファイル名は gray のように、意味に合わせます。

console.log()console.log()console.log()console.log()

rx.flex(
    rx.code("console.log()", color_scheme="indigo"),
    rx.code("console.log()", color_scheme="crimson"),
    rx.code("console.log()", color_scheme="orange"),
    rx.code("console.log()", color_scheme="cyan"),
    direction="column",
    spacing="2",
    align="start",
)

文中に入れる

rx.text の子として文字列と rx.code を混ぜると、文の途中にコードが入ります。サイズは外側の rx.text の size に従います。

Run reflex run and open localhost:3000 in your browser. Stop the server with Ctrl+C.

rx.text(
    "Run ",
    rx.code("reflex run"),
    " and open ",
    rx.code("localhost:3000", variant="ghost"),
    " in your browser. Stop the server with ",
    rx.code("Ctrl+C", color_scheme="gray"),
    ".",
    size="3",
)

注文書を仕上げる

コマンドは既定の soft で、ファイル名はグレーの outline で区別します。案内のボックスは rx.callout です。

Install the package with pip install reflex, then create an app with reflex init. Settings live in rxconfig.py.

rx.callout.root(
    rx.callout.icon(rx.icon("terminal")),
    rx.callout.text(
        "Install the package with ",
        rx.code("pip install reflex"),
        ", then create an app with ",
        rx.code("reflex init"),
        ". Settings live in ",
        rx.code("rxconfig.py", variant="outline", color_scheme="gray"),
        ".",
    ),
)

工房ノート

rx.code("…") は文中の短いコード。複数行・シンタックスハイライトは rx.code_block。
variant: solid · soft（既定） · outline · ghost。high_contrast でより濃く。
size を指定しなければ、周りの rx.text のサイズに従う。
color_scheme は意味に合わせる（エラーは red、中立は gray）。

← 前へ

タイポグラフィ · Link

タイポグラフィ · Markdown

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex