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

そのほかの道具

Theme

rx.themerx.theme_panel

公式ドキュメント

工房の注文書

サイト全体はそのままにして、イベントのバナーのボックスひとつだけを、ティール色でピル型の角に変えてください。

rx.themeは、Radix コンポーネントの色、角の丸み、サイズの比率を決めるテーマプロバイダーです。ふつうはアプリ全体に一度かけ、ページの中でもう一度包むとその内側だけを別のテーマで上書きします。このページの例はすべてこの上書きなので、サイトのほかの場所は変わりません。

rx.theme(
    rx.box(
        rx.button("Teal button"),
        padding="12px",
    ),
    accent_color="teal",
)

プロパティを変えてみる

カードひとつをrx.themeで包みました。テーマを変えると、ボタン、バッジ、スイッチ、カードがまとめて追従します。

プロパティを変えてみる

Spring sale

Up to 30% off this week.

New

accent_color

gray_color

radius

scaling

panel_background

has_background

rx.theme(
    rx.box(
        rx.card(
            rx.flex(
                rx.heading("Spring sale", size="4"),
                rx.text("Up to 30% off this week.", color_scheme="gray"),
                rx.flex(
                    rx.button("Shop now"),
                    rx.button("Later", variant="soft"),
                    rx.badge("New"),
                    rx.switch(default_checked=True),
                    spacing="3",
                    align="center",
                ),
                direction="column",
                spacing="3",
            ),
        ),
        padding="16px",
    ),
    accent_color="teal",
    gray_color="auto",
    radius="medium",
    scaling="100%",
    panel_background="translucent",
    has_background=True,
)

accent_color はアクセントカラー、gray_color はグレーの色味、radius は角の丸み、scaling は全体のサイズ比率です。has_background をオンにすると、テーマの領域に背景色が塗られます。

プロパティ	値	既定値	用途
`accent_color`	Radix の色名26種類	`"indigo"`	ボタン・リンク・スイッチなどのアクセントカラー
`gray_color`	`"gray"` `"mauve"` `"slate"` `"sage"` `"olive"` `"sand"` `"auto"`	`"auto"`	グレー系。auto はアクセントカラーに合うグレー
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	`"medium"`	すべてのコンポーネントの角の丸み
`scaling`	`"90%"` `"95%"` `"100%"` `"105%"` `"110%"`	`"100%"`	文字・余白・コンポーネントのサイズ比率
`panel_background`	`"solid"` `"translucent"`	`"translucent"`	カード・メニューなどのパネルの背景を透かすかどうか
`has_background`	`True` / `False`	`True`	テーマの領域に背景色を塗るかどうか
`appearance`	`"inherit"` `"light"` `"dark"`	`"inherit"`	ライト・ダークモード。アプリのレベルでだけ使う（下記）
`default_open` (theme_panel)	`True` / `False`	`False`	テーマパネルを開いた状態で始める

アプリ全体にテーマをかける

公式ドキュメントはrx.App(theme=rx.theme(...))で説明していますが、Reflex 0.10 ではこの引数は「古い近道」とされ、rxconfig.pyのRadixThemesPlugin(theme=...)が正式な場所です。このサイトもこの方法でaccent_color="indigo"、gray_color="slate"、radius="large"をかけています。サイト全体が変わってしまうので、コードとしてだけ示します。

# rxconfig.py (Reflex 0.10): the app-wide theme goes to the Radix Themes plugin
import reflex as rx

config = rx.Config(
    app_name="my_app",
    plugins=[
        rx.plugins.RadixThemesPlugin(
            theme=rx.theme(appearance="light", has_background=True, radius="large", accent_color="teal"),
        ),
    ],
)

# The official docs' way; in 0.10 it remains as a deprecated shortcut
app = rx.App(
    theme=rx.theme(appearance="light", has_background=True, radius="large", accent_color="teal"),
)

appearanceはアプリレベルのテーマで使うと、既定のカラーモード（ライト・ダーク）を決めます。0.10 では、ページ内のrx.themeに渡したappearanceは描画時に取り除かれるので、一部だけをダークにするのには使えません。

一部だけ上書きする

rx.themeで包んだ部分だけに新しいテーマが適用され、包んでいない側はアプリのテーマのままです。渡さなかったプロパティは外側のテーマを受け継ぎます。 rx.theme自体に渡したpaddingのようなスタイルは無視されるので、余白は内側のrx.boxに渡します。

App theme

Draft

Override

Draft

rx.flex(
    rx.card(
        rx.flex(rx.text("App theme"), rx.button("Save"), rx.badge("Draft"), spacing="3", align="center"),
    ),
    rx.theme(
        rx.card(
            rx.flex(rx.text("Override"), rx.button("Save"), rx.badge("Draft"), spacing="3", align="center"),
        ),
        accent_color="crimson",
        radius="full",
        has_background=False,
    ),
    spacing="4",
    wrap="wrap",
)

テーマパネル

rx.theme_panel()は画面の右上に浮かぶテーマエディターです。色や角の丸みをクリックして試しながら選び、その値をコードのrx.themeに書き写します。閉じた状態で始まり、default_open=Trueなら開いた状態で始まります。サイト全体のテーマを変える道具なので、このページではコードとしてだけ示します。

rx.theme_panel()                   # theme editor in the top-right corner (starts closed)
rx.theme_panel(default_open=True)  # starts open

rx.theme(rx.text("..."), theme_panel=True)   # shortcut that puts the panel inside the theme

注文書を仕上げる

バナーのボックスだけをrx.themeで包み、ティール色、ピル型の角、少し大きめの比率に変えました。中のcalloutとボタンは、色を個別に渡さなくてもテーマに従います。

Event week: free shipping on every order.

rx.theme(
    rx.box(
        rx.callout("Event week: free shipping on every order.", icon="party-popper"),
        rx.flex(
            rx.button(rx.icon("gift"), "See deals"),
            rx.button("Remind me", variant="outline"),
            spacing="3",
            margin_top="12px",
        ),
        padding="16px",
    ),
    accent_color="teal",
    radius="full",
    scaling="105%",
    has_background=False,
)

工房ノート

アプリ全体のテーマは rxconfig.py の RadixThemesPlugin(theme=rx.theme(...))。rx.App(theme=) は 0.10 では古い近道。
ページ内の rx.theme は包んだ部分だけを上書きする。渡さなかった値は受け継ぐ。
accent_color · gray_color · radius · scaling · panel_background · has_background。
appearance はアプリレベルでだけ。rx.theme に渡したスタイルは無視されるので内側のボックスに。
rx.theme_panel() で選び、選んだ値をコードに書き写す。

← 前へ

HTML要素 · SVG

そのほかの道具 · Skeleton

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

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