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

レイアウト

Inset

rx.inset

公式ドキュメント

工房の注文書

商品カードの上部に、カードの端までぴったり広がる写真を入れてください。

rx.inset は、中身に負のマージンをつけて、囲んでいる箱の内側の余白を越えて端まで中身を広げます。Cardの中に入れると、画像がカードの枠線の端から端まで広がります。カード上部の写真や下部の地図のように、中身を端にくっつけたいときに使います。

A river between the hills, seen from above.

rx.card(
    rx.inset(
        rx.image(
            src="https://picsum.photos/id/1015/600/300",
            alt="River",
            width="100%",
            height="auto",
            display="block",
        ),
        side="top",
        pb="current",
    ),
    rx.text("A river between the hills, seen from above."),
    width="280px",
)

プロパティを変えてみる

カードの中に画像を1枚だけ入れて、side を変えてみます。side は中身をくっつける端を選びます。top なら上と左右が、left なら左と上下が広がり、反対側（下、右）だけにカードの余白が残ります。x は左右だけ、y は上下だけを広げます。カードの size が大きいほど内側の余白が大きいので、違いがよくわかります。

sideは端まで広げる側、clipは切り取る境界です。classicのカードでclipを変えると、枠線を覆うかどうかが変わります。

プロパティ	値	既定値	用途
`side`	`"top"` `"bottom"` `"left"` `"right"` `"x"` `"y"`	4辺すべて	中身をくっつける端。topは上と左右、xは左右だけ、yは上下だけ
`clip`	`"border-box"` `"padding-box"`	`"border-box"`	枠線の外側の線まで広げるか、枠線の内側までにとどめるか
`p` `px` `py` `pt` `pr` `pb` `pl`	`"current"` `"0"`	なし	Insetの内側の余白。currentは親の内側の余白と同じにする

どのプロパティも rx.breakpoints(...) で画面幅ごとに変えられます。Radix Themesは side="all" も受け付けますが、インストールされている0.10では "all" を渡すとエラーになります。4辺すべてを広げるなら side を省略します。

下へ：side="bottom"

side="bottom" は下と左右を広げます。片側の端にくっつけるときは、反対側の内側の余白を "current" にしておくのがおすすめです。そうすると、端まで広げない側はもとのカードの余白の分だけ離れます。下の例では、文章のあとに画像を置いて下側を広げ、上側に pt="current" を指定しました。

The inset below uses a bottom side.

rx.card(
    rx.text("The inset below uses a bottom side."),
    rx.inset(
        rx.image(
            src="https://picsum.photos/id/1015/600/300",
            alt="River",
            width="100%",
            height="auto",
            display="block",
        ),
        side="bottom",
        pt="current",
    ),
    width="280px",
)

左・右へ

side="right" や "left" は、中身と画像を横に並べるときに使います。そのためには、カードの中を direction="row" のFlexで組む必要があります。画像の側には、反対側の余白（pl または pr）を "current" で指定します。

This inset uses a right side.

This inset uses a left side.

rx.flex(
    rx.card(
        rx.flex(
            rx.text("This inset uses a right side."),
            rx.inset(
                rx.box(background="center/cover url('https://picsum.photos/id/1015/300/300')", height="100%"),
                width="100%",
                side="right",
                pl="current",
            ),
            direction="row",
            width="100%",
        ),
        width="260px",
    ),
    rx.card(
        rx.flex(
            rx.inset(
                rx.box(background="center/cover url('https://picsum.photos/id/1015/300/300')", height="100%"),
                width="100%",
                side="left",
                pr="current",
            ),
            rx.text("This inset uses a left side."),
            direction="row",
            width="100%",
        ),
        width="260px",
    ),
    spacing="4",
    wrap="wrap",
)

current余白の使いどころ

上を広げたInsetのすぐ下に文章を置くと、既定では文章が画像にぴったりくっつきます。pb="current" を指定すると、その間にカードの内側の余白と同じすき間ができます。値は "current" と "0" の2つです。

No pb: text touches the box.

pb=current: same gap as the card padding.

rx.flex(
    rx.card(
        rx.inset(rx.box(height="60px", background_color="var(--accent-5)"), side="top"),
        rx.text("No pb: text touches the box."),
        width="200px",
    ),
    rx.card(
        rx.inset(rx.box(height="60px", background_color="var(--accent-5)"), side="top", pb="current"),
        rx.text("pb=current: same gap as the card padding."),
        width="200px",
    ),
    spacing="4",
    wrap="wrap",
)

注文書を仕上げる

写真は上の端まで広げ、pb="current" で商品名とほどよく離しました。残りの中身は、カードの余白の中にそのまま収まります。

Blue mug

$18

rx.card(
    rx.inset(
        rx.image(src="https://picsum.photos/id/30/600/400", alt="Mug", width="100%", height="auto", display="block"),
        side="top",
        pb="current",
    ),
    rx.heading("Blue mug", size="3"),
    rx.text("$18", color="var(--gray-11)", margin_bottom="8px"),
    rx.button("Add to cart", width="100%"),
    width="240px",
)

工房ノート

rx.insetは負のマージンで中身を親（主にCard）の端まで広げる。
sideはくっつける端：top（上+左右）・bottom・left・right・x（左右）・y（上下）。省略すれば4辺すべて（0.10では"all"はエラー）。
片側だけ広げるときは、反対側の余白（pb・pt・pl・pr）を"current"にしてカードの余白を保つ。
left・rightでは、カードの中をdirection="row"のFlexで組む必要がある。
clipはborder-box（枠線まで）・padding-box（枠線の内側）。

← 前へ

レイアウト · Card

レイアウト · Aspect Ratio

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

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