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

レイアウト

Card

rx.card

公式ドキュメント

工房の注文書

ブログのトップページに、記事ごとにタイトルと要約の入ったカードを作り、カードを押すとその記事に移動するようにしてください。

rx.card は、互いに関連する内容をひとまとまりにする箱です。Boxに似ていますが枠線があり、テーマの色と角の丸みに従い、size で内側の余白をRadixの段階（"1"~"5"）に合わせて決めます。そのため、Boxより少ないスタイル指定でテーマになじむ見た目になります。

Basic Card

rx.card("Basic Card")

プロパティを変えてみる

size が大きくなると、内側の余白と角の丸みが一緒に大きくなります。variant で枠線と背景の雰囲気を変えます。

プロパティを変えてみる

Post title

A short summary of the post.

title

size

variant

width

rx.card(
    rx.heading("Post title", size="3"),
    rx.text("A short summary of the post.", size="2"),
    size="2",
    variant="surface",
    width="280px",
)

surfaceは控えめな枠線、classicは影のある立体感、ghostは枠線なしで余白だけを残します。

プロパティ	値	既定値	用途
`size`	`"1"` ~ `"5"`	`"1"`	内側の余白と角の丸み
`variant`	`"surface"` `"classic"` `"ghost"`	`"surface"`	枠線・背景の雰囲気
`as_child`	`True` / `False`	`False`	カードの代わりに子要素（リンク、ボタン）をカードの見た目で描画する

size は rx.breakpoints(...) で画面幅ごとに変えられます。そのほかの大きさや余白は、Boxと同じくCSSプロパティで指定します。

5つのサイズ

公式ドキュメントの例です。同じ文字でも、sizeが大きくなるほどカードにゆとりが出ます。

Card 1

Card 2

Card 3

Card 4

Card 5

rx.flex(
    rx.card("Card 1", size="1"),
    rx.card("Card 2", size="2"),
    rx.card("Card 3", size="3"),
    rx.card("Card 4", size="4"),
    rx.card("Card 5", size="5"),
    spacing="2",
    align_items="flex-start",
    flex_wrap="wrap",
)

3つのvariant

公式ドキュメントの本文には例がありませんが、プロパティ表に載っている variant です。既定の surface、立体感のある classic、枠線のない ghost があります。ghostは、カードの余白のルールだけを借りたいときに使います。

surface

classic

ghost

rx.flex(
    rx.card("surface", variant="surface"),
    rx.card("classic", variant="classic"),
    rx.card("ghost", variant="ghost"),
    spacing="4",
    wrap="wrap",
)

ほかの要素として描画する：as_child

as_child=True を指定すると、カード自体は描画されず、すぐ下の子要素がカードの見た目で描画されます。子がリンクなら、カード全体が押せるリンクになります。リンクやボタンでよく使います。下のカードを押すと、新しいタブでReflexのドキュメントが開きます。

Quick Start

Get started with Reflex in 5 minutes.

rx.card(
    rx.link(
        rx.flex(
            rx.avatar(src="https://picsum.photos/id/64/100/100", fallback="RX"),
            rx.box(
                rx.heading("Quick Start", as_="h2", size="3"),
                rx.text("Get started with Reflex in 5 minutes."),
            ),
            spacing="2",
        ),
        href="https://reflex.dev/docs/getting-started/introduction/",
        is_external=True,
    ),
    as_child=True,
)

Insetで端まで

カードの中の画像を枠線までぴったり広げるには、rx.inset で包みます。内側の余白の分だけ外へ引き出し、端にくっつけます。詳しい使い方はInsetのページで扱います。

Fresh strawberries, picked this morning.

rx.card(
    rx.inset(
        rx.image(src="https://picsum.photos/id/1080/600/300", width="100%", height="auto", display="block"),
        side="top",
        pb="current",
    ),
    rx.text("Fresh strawberries, picked this morning."),
    width="260px",
)

注文書を仕上げる

記事ごとにカードを1枚置き、as_child=True でカード全体をリンクにしました。上の画像は rx.inset で端まで広げています。リンクは underline="none" で下線を消しました。

Glazing basics

How to mix your first glaze.

Kiln care

Keep your kiln clean and safe.

rx.flex(
    rx.card(
        rx.link(
            rx.box(
                rx.inset(
                    rx.image(src="https://picsum.photos/id/1043/600/300", width="100%", height="auto", display="block"),
                    side="top",
                    pb="current",
                ),
                rx.heading("Glazing basics", size="3"),
                rx.text("How to mix your first glaze.", size="2", color="var(--gray-11)"),
            ),
            href="#",
            underline="none",
        ),
        as_child=True,
        width="240px",
    ),
    rx.card(
        rx.link(
            rx.box(
                rx.inset(
                    rx.image(src="https://picsum.photos/id/1060/600/300", width="100%", height="auto", display="block"),
                    side="top",
                    pb="current",
                ),
                rx.heading("Kiln care", size="3"),
                rx.text("Keep your kiln clean and safe.", size="2", color="var(--gray-11)"),
            ),
            href="#",
            underline="none",
        ),
        as_child=True,
        width="240px",
    ),
    spacing="4",
    wrap="wrap",
)

工房ノート

rx.cardは枠線とテーマの見た目を備えた、まとめるための箱。
size "1"~"5"で余白と丸みを、variant surface・classic・ghostで雰囲気を決める。
as_child=Trueなら子（リンク・ボタン）がカードの見た目になり、カード全体を押せる。
画像を端まで広げるにはrx.insetで包む。

← 前へ

レイアウト · Separator

レイアウト · Inset

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex