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

HTML要素

HTML

rx.el.buttonrx.el.divrx.el.inputrx.el.prx.el.spanrx.el.a

公式ドキュメント

工房の注文書

デザインシステムを使わず素の HTML だけで、閉じるボタンとリンクの付いた小さなお知らせカードを自分で装飾してください。

rx.elには、Web 開発で使う HTML 要素がそのまま入っています。rx.el.divは<div>に、rx.el.buttonは<button>になります。 Radix ベースのrx.buttonと違って variant・size のような見た目のプロパティはなく、スタイルがまったくない状態で出てきます。このサイトでは Tailwind の基本リセット（preflight）がオンになっているので、ボタンの枠線や入力欄の線まで消えて見えます。

A plain paragraph.

rx.el.div(
    rx.el.p("A plain paragraph."),
    rx.el.button("A plain button"),
    rx.el.input(placeholder="A plain input"),
)

プロパティを変えてみる

見た目はスタイルのプロパティ（CSS プロパティ名をアンダースコアで書いたキーワード）で直接付けます。値を変えると、素のボタンがどう変わるかを見てみましょう。

プロパティを変えてみる

label

background

color

padding

radius

weight

disabled

rx.el.button(
    "Buy now",
    background="#4f46e5",
    color="white",
    padding="8px 16px",
    border_radius="6px",
    font_weight="600",
    disabled=False,
    cursor="pointer",
)

rx.el の要素には variant がありません。background、padding、border_radius のような CSS プロパティがそのままデザインです。

プロパティ	値	既定値	用途
CSS プロパティ（`padding`, `color` …）	CSS の値	なし	キーワードで直接スタイルを付ける
`class_name`	クラスの文字列	なし	Tailwind のような CSS クラス
`id` `title` `hidden` `role` `tab_index` `lang` `dir`	文字列・bool・int	なし	すべての要素に共通の HTML 属性
`custom_attrs`	dict	なし	`aria-`、`data-`のように名前に`-`がある属性
`type` (button)	`"submit"` `"reset"` `"button"`	ブラウザ: `"submit"`	フォーム内で押したときの動作
`type` (input)	`"text"` `"email"` `"range"` `"date"` … 22種類	`"text"`	入力欄の種類
`value` / `on_change` (input)	文字列・数値 / イベント	なし	制御入力欄。`default_value`は非制御
`href` `target` (a)	URL / `"_blank"` …	なし	リンク先と開く場所
`on_click` `on_key_down` …	イベントハンドラー	なし	すべての要素の基本イベント

スタイルを付ける3つの方法

キーワードのスタイルプロパティ、style辞書、class_nameの CSS クラスです。3つを混ぜて使っても構いません。 rx.color("indigo", 3)のようにテーマの色を使えば、ダークモードでも色が適切に切り替わります。

Style props

style dict

Tailwind classes

rx.el.div(
    rx.el.div(
        "Style props",
        padding="12px",
        border=f"1px solid {rx.color('indigo', 7)}",
        border_radius="8px",
        background=rx.color("indigo", 3),
    ),
    rx.el.div(
        "style dict",
        style={"padding": "12px", "border": "1px dashed gray", "border_radius": "8px"},
    ),
    rx.el.div(
        "Tailwind classes",
        class_name="p-3 rounded-lg border-2 border-dotted font-semibold",
    ),
    display="flex",
    gap="12px",
    flex_wrap="wrap",
)

すべての要素に共通の属性

titleはマウスを乗せると出る標準のツールチップ、hiddenは非表示、dirは文字の方向、tab_indexは Tab キーの順番です。 aria-labelやdata-kindのように名前にハイフンがある属性はcustom_attrsで渡します。

Hover me

Right to left

Focus me with Tab

rx.el.div(
    rx.el.span("Hover me", title="A native tooltip", text_decoration="underline dotted"),
    rx.el.span("You cannot see me", hidden=True),
    rx.el.p("Right to left", dir="rtl", lang="en"),
    rx.el.div(
        "Focus me with Tab",
        tab_index=0,
        role="note",
        custom_attrs={"aria-label": "Demo note", "data-kind": "demo"},
        padding="8px",
        border="1px solid gray",
        border_radius="6px",
    ),
    display="flex",
    flex_direction="column",
    gap="8px",
)

rx.el.button

on_clickで State を変えるのはrx.buttonと同じです。フォームの中に置くときはtypeが重要です。指定しないとブラウザの既定値"submit"になり、押した瞬間にフォームが送信されるので、普通のボタンはtype="button"と書きます。 name・valueは送信時に一緒に送る値で、form_action・form_methodのようなform_*属性は、そのボタンに限ってフォームの設定を変えます。

Count: 0

class HtmlElButtonState(rx.State):
    count: int = 0

    @rx.event
    def add_one(self):
        self.count += 1


rx.el.div(
    rx.el.button(
        "Add one",
        type="button",
        on_click=HtmlElButtonState.add_one,
        padding="6px 14px",
        border="1px solid gray",
        border_radius="6px",
        cursor="pointer",
    ),
    rx.el.button("Disabled", disabled=True, padding="6px 14px", border="1px solid gray", border_radius="6px", opacity="0.5"),
    rx.el.span("Count: ", HtmlElButtonState.count),
    display="flex",
    gap="12px",
    align_items="center",
)

rx.el.input

valueとon_changeを一緒に渡すと、State が入力欄を握る制御入力欄になります。rx.el.inputにはon_change、on_key_down、on_key_upのイベントが別にあります。 on_key_downは押したキーの名前を渡すので、下では最後に押したキーを表示しています。type="range"はスライダーになります。

Hello, (last key: )

Level: 40

class HtmlElInputState(rx.State):
    name: str = ""
    level: int = 40
    last_key: str = ""

    @rx.event
    def change_name(self, value: str):
        self.name = value

    @rx.event
    def change_level(self, value: float):
        self.level = int(value)

    @rx.event
    def remember_key(self, key: str):
        self.last_key = key


rx.el.div(
    rx.el.input(
        type="text",
        value=HtmlElInputState.name,
        on_change=HtmlElInputState.change_name,
        on_key_down=HtmlElInputState.remember_key,
        placeholder="Your name",
        max_length=20,
        padding="6px 10px",
        border="1px solid gray",
        border_radius="6px",
    ),
    rx.el.p("Hello, ", HtmlElInputState.name, " (last key: ", HtmlElInputState.last_key, ")"),
    rx.el.input(
        type="range",
        min=0,
        max=100,
        step=5,
        value=HtmlElInputState.level,
        on_change=HtmlElInputState.change_level,
    ),
    rx.el.p("Level: ", HtmlElInputState.level),
    display="flex",
    flex_direction="column",
    gap="8px",
    max_width="320px",
)

typeひとつで、日付、色、チェックボックス、メール、数値の入力欄になります。State なしで初期値だけ渡すならdefault_value・default_checkedを使います。 required、min・max、pattern、max_lengthのようなチェック用の属性は、フォーム送信時にブラウザが確認します。

Remember me

rx.el.div(
    rx.el.input(type="date"),
    rx.el.input(type="color", default_value="#6e56cf"),
    rx.el.label(rx.el.input(type="checkbox", default_checked=True), " Remember me"),
    rx.el.input(type="email", placeholder="you@example.com", required=True, border="1px solid gray", padding="4px 8px"),
    rx.el.input(type="number", min=1, max=9, default_value=3, border="1px solid gray", padding="4px 8px", width="80px"),
    display="flex",
    gap="12px",
    flex_wrap="wrap",
    align_items="center",
)

rx.el.p · rx.el.span · rx.el.div

pは段落なので1行をまるごと使い、spanは行の中にとどまる断片です。divは意味を持たない箱で、何でもまとめるときに使います。

A p is a block. A span stays inside the line.

A div is a box with no meaning.

rx.el.div(
    rx.el.p(
        "A p is a block. A ",
        rx.el.span("span", color=rx.color("tomato", 11), font_weight="bold"),
        " stays inside the line.",
    ),
    rx.el.div("A div is a box with no meaning.", padding="8px", background=rx.color("gray", 3)),
)

rx.el.a

Reflex 0.10 のrx.el.aは React Router のLinkとして描かれ、hrefは内部でtoに移されます。そのため"/"のようなサイト内のアドレスはページを再読み込みせずに移動し、外部のアドレスは普通のリンクのように開きます。再読み込みして移動するならreload_document=True、履歴を置き換えるならreplace=True、トランジション効果はview_transition=Trueです。downloadはファイルとしてダウンロードさせます。

Reflex docs (new tab)Home page

rx.el.div(
    rx.el.a(
        "Reflex docs (new tab)",
        href="https://reflex.dev/docs/library/html/html/",
        target="_blank",
        rel="noopener noreferrer",
        color=rx.color("indigo", 11),
        text_decoration="underline",
    ),
    rx.el.a("Home page", href="/", color=rx.color("indigo", 11), text_decoration="underline"),
    display="flex",
    gap="16px",
)

rx.elの要素は100個を超えます。テキスト要素、文書構造、フォーム、メディア、表、SVG は、続く5ページでグループごとに扱います。

注文書を仕上げる

spanでバッジを、pで本文を、aとbuttonで操作を作り、すべてスタイルのプロパティで装飾しました。閉じると State がカードを隠します。

NewVersion 2 is out.

Read what changed before you update.

Release notes

class HtmlElNoticeState(rx.State):
    visible: bool = True

    @rx.event
    def dismiss(self):
        self.visible = False

    @rx.event
    def show_again(self):
        self.visible = True


rx.cond(
    HtmlElNoticeState.visible,
    rx.el.div(
        rx.el.p(
            rx.el.span(
                "New",
                background=rx.color("indigo", 9),
                color="white",
                padding="2px 8px",
                border_radius="999px",
                font_size="12px",
                margin_right="8px",
            ),
            "Version 2 is out.",
            font_weight="600",
        ),
        rx.el.p("Read what changed before you update.", color=rx.color("gray", 11), margin_y="6px"),
        rx.el.div(
            rx.el.a(
                "Release notes",
                href="https://reflex.dev/docs/",
                target="_blank",
                rel="noopener noreferrer",
                color=rx.color("indigo", 11),
                text_decoration="underline",
            ),
            rx.el.button(
                "Dismiss",
                type="button",
                on_click=HtmlElNoticeState.dismiss,
                padding="4px 12px",
                border=f"1px solid {rx.color('gray', 7)}",
                border_radius="6px",
                cursor="pointer",
            ),
            display="flex",
            gap="16px",
            align_items="center",
        ),
        padding="16px",
        border=f"1px solid {rx.color('indigo', 6)}",
        border_radius="10px",
        background=rx.color("indigo", 2),
        max_width="360px",
    ),
    rx.el.button("Show again", on_click=HtmlElNoticeState.show_again, text_decoration="underline", cursor="pointer"),
)

工房ノート

rx.el.<タグ> は HTML 要素そのままで、スタイルがない。見た目は CSS のキーワードプロパティ・style・class_name で付ける。
title・hidden・dir・tab_index・role はすべての要素に共通。aria-*・data-* は custom_attrs で。
フォーム内の rx.el.button は既定が submit。普通のボタンは type="button"。
rx.el.input は value + on_change で制御、default_value で非制御。on_key_down は押したキーを渡す。
0.10 の rx.el.a は React Router の Link。href が to になり、サイト内では再読み込みせずに移動する。

← 前へ

ほかのチャートライブラリ · Pyplot

HTML要素 · HTML Text

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex