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

そのほかの道具

Skeleton

rx.skeleton

公式ドキュメント

工房の注文書

プロフィールカードを読み込む1〜2秒の間、画面がガタつかないよう、同じサイズのグレーのプレースホルダーを表示してください。

rx.skeletonは、内容を読み込んでいる間その場所に表示されるグレーのプレースホルダーです。子要素を包むと子要素のサイズの点滅するボックスになり、読み込みが終わると本物の内容が同じ場所に現れるので、画面のレイアウトが揺れません。loadingを渡さなければプレースホルダーの状態です。

rx.skeleton(rx.button("Loading button"))

プロパティを変えてみる

loadingをオフにするとプレースホルダーが外れ、本物の内容が表示されます。子要素のないrx.skeletonはwidth・heightでサイズを決めます。

プロパティを変えてみる

title

width

height

rx.vstack(
    rx.flex(
        rx.skeleton(rx.avatar(fallback="RX", size="4"), loading=True),
        rx.box(
            rx.skeleton(rx.heading("Grace Hopper", size="3"), loading=True),
            rx.skeleton(rx.text("Posted two days ago.", size="2"), loading=True),
        ),
        rx.skeleton(rx.button("Follow"), loading=True),
        spacing="3",
        align="center",
    ),
    rx.skeleton(width="240px", height="24px", loading=True),
    spacing="4",
)

loading がオンの間は、中のボタンを押せません。プレースホルダーが子要素のサイズをそのまま守るので、オフにしてもレイアウトは動きません。

プロパティ	値	既定値	用途
`loading`	`True` / `False`	`True`	プレースホルダーを表示するか、本物の内容を表示するか
`width` `height`	CSS の長さ（レスポンシブ可）	子要素のサイズ	プレースホルダーのサイズ
`min_width` `max_width`	CSS の長さ	なし	幅の最小・最大
`min_height` `max_height`	CSS の長さ	なし	高さの最小・最大

サイズと loading

公式ドキュメントの例です。ボタンを包んだ2つのプレースホルダーはheightで高さを変えていて、下の2つはloadingがTrueのときとFalseのときです。

Text is already loaded.

rx.vstack(
    rx.skeleton(rx.button("button-small"), height="10px"),
    rx.skeleton(rx.button("button-big"), height="20px"),
    rx.skeleton(rx.text("Text is loaded."), loading=True),
    rx.skeleton(rx.text("Text is already loaded."), loading=False),
)

テキストはテキストそのものを包む

テキストのプレースホルダーは、テキストを包む親ではなくテキストそのものを包みます。親を包むと親の幅全体がグレーになり、テキストを包むと実際の文の長さの分だけグレーになります。rx.text(rx.skeleton("..."))のように書きます。

Wrap the parent:

Wrap the text itself:

rx.vstack(
    rx.text("Wrap the parent:", size="1", color_scheme="gray"),
    rx.skeleton(rx.box(rx.text("Short text"), width="100%")),
    rx.text("Wrap the text itself:", size="1", color_scheme="gray"),
    rx.text(rx.skeleton("Short text")),
    width="300px",
)

サイズを直接渡す

子要素なしでwidth・heightだけを渡すと、空のプレースホルダーのボックスになります。どんな内容が来るかまだわからない行、画像、アイコンの場所を先に確保しておくときに使います。

rx.vstack(
    rx.skeleton(width="240px", height="16px"),
    rx.skeleton(width="180px", height="16px"),
    rx.skeleton(width="100%", max_width="320px", height="80px"),
    rx.skeleton(width="48px", height="48px"),
    width="100%",
)

注文書を仕上げる

Reloadを押すとバックグラウンドイベントがloadingをオンにし、1.5秒待ってからオフにします。その間、アバター、名前、自己紹介がそれぞれのサイズのままプレースホルダーに変わります。自己紹介の文はrx.textの中でテキストを包んだので、文の長さの分だけグレーになります。

Ada Lovelace

Wrote the first program.

import asyncio


class SkeletonProfileState(rx.State):
    loading: bool = False
    name: str = "Ada Lovelace"
    bio: str = "Wrote the first program."

    @rx.event(background=True)
    async def reload_profile(self):
        async with self:
            self.loading = True
        await asyncio.sleep(1.5)
        async with self:
            self.loading = False


rx.card(
    rx.flex(
        rx.skeleton(rx.avatar(fallback="AL", size="5", radius="full"), loading=SkeletonProfileState.loading),
        rx.box(
            rx.skeleton(rx.heading(SkeletonProfileState.name, size="4"), loading=SkeletonProfileState.loading),
            rx.text(rx.skeleton(SkeletonProfileState.bio, loading=SkeletonProfileState.loading), size="2", color_scheme="gray"),
        ),
        spacing="4",
        align="center",
    ),
    rx.button(
        "Reload",
        on_click=SkeletonProfileState.reload_profile,
        disabled=SkeletonProfileState.loading,
        variant="soft",
        margin_top="12px",
    ),
    max_width="360px",
)

工房ノート

rx.skeleton(子要素) は子要素のサイズのままグレーのプレースホルダーになる。
loading=False なら本物の内容。渡さなければプレースホルダーの状態（True）。
テキストは親ではなくテキストそのものを包む: rx.text(rx.skeleton("..."))。
子要素なしで width・height を渡して空の場所を確保する。
プレースホルダーの間は、中のボタン・入力欄を押せない。

← 前へ

そのほかの道具 · Theme

そのほかの道具 · Clipboard

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex