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

データ表示

Progress

rx.progress

公式ドキュメント

工房の注文書

ファイルを送っている間、何パーセントまで進んだかをバーで見せ、終わったら緑色に変えてください。

rx.progressは、時間がかかる作業や複数の段階からなる作業がどこまで進んだかをバーで表示します。valueに0〜100の値を渡します。幅は既定で親の100%です。

rx.vstack(
    rx.progress(value=0),
    rx.progress(value=50),
    rx.progress(value=100),
    width="50%",
)

プロパティを変えてみる

valueとmaxは整数しか受け付けないので、この実習台には入れていません。進捗の値を動かす例は下の「Stateで動かす」にあります。

プロパティを変えてみる

size

variant

color

radius

high_contrast

rx.progress(value=60, size="2", variant="surface", color_scheme="indigo", radius="full", high_contrast=False)

sizeで太さを、variantで下地の形を、color_schemeで色を選びます。

プロパティ	値	既定値	用途
`value`	整数	なし	現在の進捗の値。指定しなければ動き続けるバー
`max`	整数	`100`	満杯になったときの値
`size`	`"1"` `"2"` `"3"`	`"2"`	バーの太さ
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	下地の形
`color_scheme`	Radixの色名	テーマの色	満たされる部分の色
`high_contrast`	`True` / `False`	`False`	コントラストを強める
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	テーマの値	角の丸み
`duration`	`"5s"`のような時間	なし	valueなしで満ちていく時間
`fill_color`	CSSの色	なし	満たされる部分の色を直接指定

maxで段階を数える

maxを変えると、valueを段階の数で数えられます。5段階中の3段階目ならvalue=3, max=5です。

3 of 5 steps

rx.vstack(
    rx.text("3 of 5 steps"),
    rx.progress(value=3, max=5),
    width="50%",
)

Stateで動かす

進捗の値を変えるには、valueにStateの値を渡します。スライダーを動かすと、バーも一緒に動きます。

30%

class ProgressSliderState(rx.State):
    value: int = 30

    @rx.event
    def set_progress_value(self, value: list[float]):
        self.value = int(value[0])


rx.vstack(
    rx.slider(default_value=[30], on_change=ProgressSliderState.set_progress_value),
    rx.progress(value=ProgressSliderState.value),
    rx.text(ProgressSliderState.value, "%"),
    width="50%",
)

実際の作業のように時間がかかる処理では、バックグラウンドイベント（@rx.event(background=True)）で値を少しずつ上げます。Stateを変えるたびにasync with self:の中で変えると、画面にすぐ送られます。この例は0.1秒ごとに5ずつ上げて2秒で終わり、動いている間にもう一度押しても無視します。

import asyncio


class ProgressLiveState(rx.State):
    value: int = 0
    running: bool = False

    @rx.event(background=True)
    async def start_progress(self):
        async with self:
            if self.running:
                return
            self.running = True
            self.value = 0
        while self.value < 100:
            await asyncio.sleep(0.1)
            async with self:
                self.value += 5
        async with self:
            self.running = False


rx.hstack(
    rx.progress(value=ProgressLiveState.value),
    rx.button("Start", on_click=ProgressLiveState.start_progress, loading=ProgressLiveState.running),
    width="60%",
    align="center",
)

値がわからないとき

valueを指定しないと、バーが延々と行き来するアニメーションになります。あとどれくらいかわからない待ち時間に使います。durationを渡すと、その時間をかけてバーが満ちていくように見せ、時間が過ぎると延々と動く形に変わります。

No value: endless animation

duration="5s": fills in 5 seconds, then keeps moving

rx.vstack(
    rx.text("No value: endless animation", size="2"),
    rx.progress(),
    rx.text('duration="5s": fills in 5 seconds, then keeps moving', size="2"),
    rx.progress(duration="5s"),
    width="60%",
)

満たす色を直接決める

fill_colorは、満たされる部分の色をCSSの色で直接決めます。Radixの色名の一覧にない色が必要なときに使います。

rx.vstack(
    rx.progress(value=70, fill_color="orange"),
    rx.progress(value=40, fill_color="#2e8b57"),
    width="50%",
)

注文書を仕上げる

ボタンを押すとバックグラウンドイベントが10%ずつ上げ、満杯になると状態の文字が「Done」になり、バーが緑色に変わります。実際のファイルは送りません。

report.pdf

Ready

import asyncio


class ProgressUploadState(rx.State):
    percent: int = 0
    status: str = "Ready"

    @rx.event(background=True)
    async def send_files(self):
        async with self:
            if self.status == "Uploading...":
                return
            self.status = "Uploading..."
            self.percent = 0
        for _ in range(10):
            await asyncio.sleep(0.2)
            async with self:
                self.percent += 10
        async with self:
            self.status = "Done"


rx.card(
    rx.vstack(
        rx.hstack(rx.icon("upload"), rx.text("report.pdf", weight="bold"), rx.spacer(), rx.text(ProgressUploadState.percent, "%"), width="100%", align="center"),
        rx.progress(value=ProgressUploadState.percent, color_scheme=rx.cond(ProgressUploadState.status == "Done", "green", "indigo")),
        rx.hstack(
            rx.text(ProgressUploadState.status, size="2", color_scheme="gray"),
            rx.spacer(),
            rx.button("Upload", size="1", on_click=ProgressUploadState.send_files),
            width="100%",
            align="center",
        ),
        width="100%",
    ),
    max_width="360px",
)

工房ノート

rx.progress(value=…)で0〜100の進捗バー。maxで基準の値を変える。
valueにStateの値を渡し、長い作業はbackgroundイベントでasync with selfを使って上げる。
valueがなければ延々と続くアニメーション、durationを渡すとその時間をかけて満ちる。
size · variant · color_scheme · radius · high_contrastで見た目を、fill_colorで満たす色を決める。

← 前へ

データ表示 · Code Block

データ表示 · Spinner

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

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