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

データ表示

Avatar

rx.avatar

公式ドキュメント

工房の注文書

プロフィールカードの上部にユーザーの写真を丸く入れてください。写真のない人は名前の頭文字で代用します。

rx.avatarはユーザーを表す小さな写真です。画像のURLをsrcに渡すと写真が、srcなしでfallbackだけを渡すとイニシャルなどの文字が表示されます。コメント、プロフィール、参加者一覧など、「誰なのか」を示す場所で使います。

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200"),
    rx.avatar(fallback="RX"),
    spacing="3",
)

プロパティを変えてみる

srcを消すとfallbackの文字が表示されます。variant、color_scheme、high_contrastは、その代替文字の見た目に適用されます。

プロパティを変えてみる

src

fallback

size

variant

color

radius

high_contrast

rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="4", variant="soft", color_scheme="indigo", radius="full", high_contrast=False)

srcを空にするとfallbackが表示されます。sizeは"1"〜"9"、radiusを"full"にすると円になります。

プロパティ	値	既定値	用途
`src`	画像のURL	なし	表示する写真
`fallback`	文字	なし	写真がない、または読み込めないときに表示するもの
`size`	`"1"` ~ `"9"`	`"3"`	大きさ
`variant`	`"solid"` `"soft"`	`"soft"`	代替文字の背景の塗り
`color_scheme`	Radixの色名	テーマの色	代替文字の色
`high_contrast`	`True` / `False`	`False`	代替文字と背景のコントラストを強める
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	テーマの値	角の丸み

大きさ

sizeは"1"から"9"までで、指定しなければ"3"です。一覧の小さな顔には"1"〜"2"、プロフィールのヘッダーには"6"以上が似合います。

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="1"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="2"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="3"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="4"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="5"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="6"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="7"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="8"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="9"),
    spacing="2",
    align="center",
    wrap="wrap",
)

variantと色

variantは代替文字の背景を決めます。"solid"は色でべったり塗り、既定値の"soft"は淡く塗ります。color_schemeはテーマとは関係なく、その色を使います。

rx.flex(
    rx.avatar(fallback="RX", variant="solid"),
    rx.avatar(fallback="RX", variant="soft"),
    rx.avatar(fallback="RX", color_scheme="indigo"),
    rx.avatar(fallback="RX", color_scheme="cyan"),
    rx.avatar(fallback="RX", color_scheme="orange"),
    rx.avatar(fallback="RX", color_scheme="crimson"),
    spacing="2",
    wrap="wrap",
)

high_contrast=Trueは代替文字と背景のコントラストを強めます。左の列が既定、右の列が高コントラストです。

rx.grid(
    rx.avatar(fallback="RX", variant="solid"),
    rx.avatar(fallback="RX", variant="solid", high_contrast=True),
    rx.avatar(fallback="RX", variant="soft"),
    rx.avatar(fallback="RX", variant="soft", high_contrast=True),
    rows="2",
    flow="column",
    spacing="2",
    width="max-content",
)

角

radiusはテーマの角の値を無視して、このアバターだけ丸みを個別に決めます。写真にも代替文字にも適用されます。

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="none"),
    rx.avatar(fallback="RX", radius="small"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="medium"),
    rx.avatar(fallback="RX", radius="large"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="full"),
    spacing="2",
)

写真を読み込めないとき

fallbackは、srcを読み込めなかったときに代わりに表示される内容です。下の2つのアバターは存在しないファイルを指しているので、代替文字が表示されます。Reflex 0.10のfallbackは文字（str）しか受け付けません。

rx.flex(
    rx.avatar(src="/no-such-photo.png", fallback="PC"),
    rx.avatar(src="/no-such-photo.png", fallback="?", color_scheme="gray"),
    spacing="2",
)

注文書を仕上げる

カードの中に大きなアバター、名前とID、編集ボタンを1行に並べます。写真を読み込めなければ「RU」が代わりに表示されます。

Reflex User

@reflexuser

rx.card(
    rx.flex(
        rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RU", size="6", radius="full"),
        rx.flex(
            rx.text("Reflex User", weight="bold", size="4"),
            rx.text("@reflexuser", color_scheme="gray", size="2"),
            direction="column",
        ),
        rx.spacer(),
        rx.button("Edit Profile", variant="soft", size="2"),
        spacing="4",
        align="center",
        width="100%",
    ),
    max_width="420px",
)

工房ノート

rx.avatar(src=…)で写真を、fallback=…で代替文字を渡す。両方渡しておくのが安全。
sizeは"1"〜"9"（既定は"3"）、radius="full"なら円。
variant（solid · soft）、color_scheme、high_contrastは代替文字の見た目を変える。
srcを読み込めないと、自動的にfallbackが表示される。

← 前へ

データ表示 · Badge

データ表示 · Icon

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex