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 Embed

rx.html

公式ドキュメント

工房の注文書

本社のシステムから HTML の断片で届く店舗のお知らせを、手を加えずそのまま、それでいて見やすく表示してください。

rx.htmlは HTML コードの文字列を受け取り、そのまま描きます。ほかの場所（CMS、メール本文、Markdown 変換器）ですでに HTML として作られた断片を表示するときに使います。画面を自分で組むときはrx.htmlよりrx.el.*の要素を使うほうがよいと、公式ドキュメントも勧めています。イベントや State を付けられるからです。

Hello from raw HTML.

rx.html("<p>Hello from <b>raw</b> <i>HTML</i>.</p>")

プロパティを変えてみる

rx.htmlは<div>をひとつ作り、その中に HTML を入れます。そのためfont_size、colorのようなスタイルは外側のdivに入り、中の文字が受け継ぎます。

プロパティを変えてみる

Bold and italic

snippet

size

color

rx.html("<b>Bold</b> and <i>italic</i>", font_size="18px", color="inherit")

HTML の断片と外側の div のスタイルを変えてみましょう。ul の記号が見えないのは、このサイトの preflight のせいです。

プロパティ	値	既定値	用途
最初の子要素	HTML 文字列または文字列の Var	必須	描く HTML。ちょうどひとつだけ受け取る
`class_name`	クラスの文字列	`"rx-Html"`が常に付く	外側の`div`のクラス
スタイルのプロパティ・`style`	CSS、`"& h2"`のような入れ子のセレクター	なし	外側の`div`とその中の要素のスタイル
`dangerouslySetInnerHTML`	`{"__html": ...}`	子要素から自動で	内部の実装。直接渡すことはない
共通の属性	`id` `title` `role` …	なし	`div`の HTML 属性

見出し5つ、見た目はひとつ

公式ドキュメントの例です。このサイトでは5つの見出しがすべて同じ大きさで表示されます。Radix と Tailwind が見出しの基本スタイルを消しているからです。

Hello World

rx.vstack(
    rx.html("<h2>Hello World</h2>"),
    rx.html("<h3>Hello World</h3>"),
    rx.html("<h4>Hello World</h4>"),
    rx.html("<h5>Hello World</h5>"),
    rx.html("<h6>Hello World</h6>"),
)

スタイルが消えたら

公式ドキュメントはclass_name="prose"と Tailwind の@tailwindcss/typographyプラグインを勧めています。このサイトにはそのプラグインがないので、コードとしてだけ示します。

# The official docs' way: the prose class from the Tailwind typography plugin
rx.html("<h2>Hello World</h2>", class_name="prose")
# + enable the @tailwindcss/typography plugin in rxconfig.py's Tailwind settings (not on this site)

プラグインがなくても、styleに"& h2"のような入れ子のセレクターを渡せば、内側の HTML の要素ごとにスタイルを付けられます。

Hello World

rx.html(
    "<h2>Hello World</h2><h3>Hello World</h3><h4>Hello World</h4>",
    style={
        "& h2": {"font_size": "24px", "font_weight": "bold"},
        "& h3": {"font_size": "20px", "font_weight": "bold"},
        "& h4": {"font_size": "16px", "font_weight": "600", "color": rx.color("gray", 11)},
    },
)

画像を入れる

<img>タグもそのまま入ります。公式ドキュメントは Reflex のバナー画像を使っていますが、この講座では外部リソースを picsum の画像に統一しました。

rx.html(
    "<img src='https://picsum.photos/id/1039/400/160' alt='A waterfall' style='border-radius: 8px' />"
)

State で作った HTML とエスケープ

子要素に文字列の Var を渡すと、State が変わるたびに HTML も変わります。このとき、ユーザーが入力した文章をそのまま差し込んではいけません。 html.escapeで<、>を置き換えておけば、タグではなく文字として表示されます。下の入力欄のが太字にならず、文字のまま表示されることを確かめてください。 rx.htmlが入れた<script>タグはエスケープしなくてもブラウザは実行しませんが、onerrorのような属性は実行されるので、エスケープが必要です。

Welcome, Ada!

Welcome, Ada!

import html


class HtmlEmbedPreviewState(rx.State):
    name: str = "<b>Ada</b>"

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

    @rx.var
    def card_html(self) -> str:
        safe = html.escape(self.name)
        return f"<p>Welcome, <mark>{safe}</mark>!</p>"


rx.vstack(
    rx.input(value=HtmlEmbedPreviewState.name, on_change=HtmlEmbedPreviewState.change_name, width="100%"),
    rx.html(HtmlEmbedPreviewState.card_html),
    rx.code(HtmlEmbedPreviewState.card_html, size="1"),
    width="100%",
    max_width="420px",
)

rx.el で書くと

内容を自分で組めるなら、同じ画面をrx.elの要素で作るほうがよいでしょう。各要素にon_clickや State を付けられ、エスケープも Reflex が自動でやってくれます。

Hello from raw HTML.

Hello from rx.el elements.

rx.flex(
    rx.html("<p>Hello from <b>raw</b> <i>HTML</i>.</p>"),
    rx.el.p("Hello from ", rx.el.b("rx.el"), " ", rx.el.i("elements"), "."),
    direction="column",
    spacing="2",
)

注文書を仕上げる

お知らせの HTML は1文字も変えず、外側から"& h3"、"& ul"、"& a"のセレクターで見出しの大きさ、リストの記号、リンクの色だけを付けました。

Store hours change

From Nov 1 we open at 8 am.

Mon to Fri: 8 am - 8 pm
Sat: 9 am - 5 pm

rx.card(
    rx.html(
        "<h3>Store hours change</h3>"
        "<p>From <b>Nov 1</b> we open at <mark>8 am</mark>.</p>"
        "<ul><li>Mon to Fri: 8 am - 8 pm</li><li>Sat: 9 am - 5 pm</li></ul>"
        "<p><a href='https://reflex.dev/docs/library/other/html-embed/' target='_blank'>Read more</a></p>",
        style={
            "& h3": {"font_size": "18px", "font_weight": "bold", "margin_bottom": "6px"},
            "& ul": {"list_style_type": "disc", "padding_left": "1.4em", "margin_y": "6px"},
            "& a": {"color": rx.color("indigo", 11), "text_decoration": "underline"},
        },
    ),
    max_width="420px",
)

工房ノート

rx.html("...") は div ひとつの中に HTML 文字列をそのまま入れる。子要素はちょうどひとつ。
自分で組む画面なら rx.el.* の要素のほうがよい。rx.html はすでに HTML になっている断片用。
見出し・リストの基本スタイルは消えている。prose クラスや "& h2" のような入れ子のセレクターで付ける。
ユーザーの入力は html.escape でエスケープしてから差し込む。

← 前へ

そのほかの道具 · Clipboard

そのほかの道具 · Script

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex