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

データ表示

Badge

rx.badge

公式ドキュメント

工房の注文書

注文一覧の各行の横に「支払い済み」「保留」「失敗」の状態がひと目でわかるように付けてください。

rx.badgeは、項目の状態や分類を短く示す小さなラベルです。「New」「Paid」「Beta」のように、一、二語で目立たせたいときに使います。文字を最初の引数に渡すと、そのままバッジの中に入ります。

New

rx.badge("New")

プロパティを変えてみる

バッジの見た目は5つのプロパティで決まります。値を変えると、バッジとコードが一緒に変わります。

プロパティを変えてみる

New

label

variant

size

color

radius

high_contrast

rx.badge("New", variant="soft", size="1", color_scheme="indigo", radius="medium", high_contrast=False)

variantで塗り方を、sizeで大きさを、color_schemeで色を選びます。high_contrastは文字と背景のコントラストを強めます。

プロパティ	値	既定値	用途
`variant`	`"solid"` `"soft"` `"surface"` `"outline"`	`"soft"`	塗り方。solidがいちばん強い
`size`	`"1"` `"2"` `"3"`	`"1"`	大きさと内側の余白
`color_scheme`	Radixの色名	テーマの色	状態の意味を表す色
`high_contrast`	`True` / `False`	`False`	文字と背景のコントラストを強める
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	テーマの値	角の丸み

大きさ

sizeは大きさと内側の余白をまとめて決めます。公式ドキュメントの本文には"1"と"2"しか書かれていませんが、Reflex 0.10は"3"まで受け付けます。

NewNewNew

rx.flex(
    rx.badge("New", size="1"),
    rx.badge("New", size="2"),
    rx.badge("New", size="3"),
    align="center",
    spacing="2",
)

4つのvariant

solidは色でべったり塗り、softは淡い背景、surfaceは淡い背景に枠線、outlineは枠線だけを描きます。何も指定しなければsoftです。

solidsoftsurfaceoutline

rx.flex(
    rx.badge("solid", variant="solid"),
    rx.badge("soft", variant="soft"),
    rx.badge("surface", variant="surface"),
    rx.badge("outline", variant="outline"),
    spacing="2",
    wrap="wrap",
)

色で意味を分ける

color_schemeは、サイト全体のテーマ色とは関係なく、このバッジの色を決めます。成功はgreen、注意はamber、失敗はredのように色に意味を持たせると、文字を読む前に状態が伝わります。

PaidPendingFailedDraft

rx.flex(
    rx.badge("Paid", color_scheme="green"),
    rx.badge("Pending", color_scheme="amber"),
    rx.badge("Failed", color_scheme="red"),
    rx.badge("Draft", color_scheme="gray"),
    spacing="2",
    wrap="wrap",
)

コントラストと角

high_contrast=Trueは文字色をより濃くしてコントラストを強めます。上の行が既定、下の行が高コントラストです。

NewNewNewNew

rx.flex(
    rx.flex(
        rx.badge("New", variant="solid"),
        rx.badge("New", variant="soft"),
        rx.badge("New", variant="surface"),
        rx.badge("New", variant="outline"),
        spacing="2",
    ),
    rx.flex(
        rx.badge("New", variant="solid", high_contrast=True),
        rx.badge("New", variant="soft", high_contrast=True),
        rx.badge("New", variant="surface", high_contrast=True),
        rx.badge("New", variant="outline", high_contrast=True),
        spacing="2",
    ),
    direction="column",
    spacing="2",
)

radiusはテーマの角の値を無視して、このバッジだけ丸みを個別に決めます。錠剤のような形にするなら"full"です。

nonesmallmediumlargefull

rx.flex(
    rx.badge("none", radius="none"),
    rx.badge("small", radius="small"),
    rx.badge("medium", radius="medium"),
    rx.badge("large", radius="large"),
    rx.badge("full", radius="full"),
    spacing="2",
    wrap="wrap",
)

アイコンと一緒に

バッジの中には文字だけでなく、ほかのコンポーネントも入れられます。公式ドキュメントのようにrx.flexでアイコンと文字を横に並べてもよいし、子として続けて渡すだけでも構いません。

8.8%

2.1%

rx.flex(
    rx.badge(
        rx.flex(rx.icon("arrow-up", size=14), rx.text("8.8%"), spacing="1", align="center"),
        color_scheme="grass",
    ),
    rx.badge(rx.icon("arrow-down", size=14), "2.1%", color_scheme="red"),
    spacing="2",
)

Stateの値で変わるバッジ

文字も色もStateの値を受け取れます。色はrx.matchで状態ごとに選びます。

Pending

class BadgeStatusState(rx.State):
    status: str = "Pending"

    @rx.event
    def set_badge_status(self, value: str):
        self.status = value


rx.flex(
    rx.select(["Pending", "Paid", "Failed"], value=BadgeStatusState.status, on_change=BadgeStatusState.set_badge_status),
    rx.badge(
        BadgeStatusState.status,
        color_scheme=rx.match(BadgeStatusState.status, ("Paid", "green"), ("Failed", "red"), "amber"),
        size="2",
    ),
    spacing="3",
    align="center",
)

注文書を仕上げる

注文番号の横に状態バッジを付けます。済んだこと（返金）はoutlineとグレーで控えめにします。

#1024

Paid

#1025

Pending

#1026

Refunded

rx.flex(
    rx.hstack(rx.text("#1024", weight="bold"), rx.badge("Paid", color_scheme="green"), align="center"),
    rx.hstack(rx.text("#1025", weight="bold"), rx.badge("Pending", color_scheme="amber"), align="center"),
    rx.hstack(rx.text("#1026", weight="bold"), rx.badge("Refunded", color_scheme="gray", variant="outline"), align="center"),
    direction="column",
    spacing="2",
)

工房ノート

rx.badge("テキスト")で作り、短い状態・分類の表示に使う。
variant: solid · soft（既定） · surface · outline。
sizeは"1"〜"3"（ドキュメント本文は1・2のみ記載）、radiusで角を個別に決める。
color_schemeに意味を持たせ、Stateの値で切り替えるときはrx.matchで選ぶ。
子にrx.iconやrx.flexを入れれば、アイコンと文字を一緒に見せられる。

← 前へ

フォーム · Upload

データ表示 · Avatar

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex