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

オーバーレイ

Hover Card

rx.hover_card.rootrx.hover_card.triggerrx.hover_card.content

公式ドキュメント

工房の注文書

コメントに書かれた投稿者名にマウスを乗せると、その人の写真と自己紹介が載った小さなカードが浮かび上がるようにしてください。

rx.hover_cardは、リンクなどの要素にマウスを乗せると浮かび上がるカードです。ツールチップより大きく、写真や複数行の文章のような豊かな内容を見せるプレビューに使います。3つのパーツで組み立てます。

hover_card.root：ホバーカードのすべてのパーツを包みます。
hover_card.trigger：マウスを乗せるとカードを開く要素（たいていはリンク）を包みます。
hover_card.content：開いたときに表示する中身です。

Hover over the text to see the card. Hover over me

rx.text(
    "Hover over the text to see the card. ",
    rx.hover_card.root(
        rx.hover_card.trigger(
            rx.link("Hover over me", color_scheme="blue", underline="always"),
        ),
        rx.hover_card.content(
            rx.text("This is the hovercard content."),
        ),
    ),
)

プロパティを変えてみる

位置と大きさはhover_card.contentに指定します。値を変えたら、リンクにマウスを乗せてみましょう。

プロパティを変えてみる

Hover over me

text

side

align

size

avoid_collisions

rx.hover_card.root(
    rx.hover_card.trigger(rx.link("Hover over me", underline="always")),
    rx.hover_card.content(
        rx.text("Preview of the linked page"),
        side="bottom",
        align="center",
        size="2",
        avoid_collisions=True,
    ),
)

sizeは"1"~"3"で内側の余白を決めます。既定では下側（bottom）の中央（center）にそろえて表示されます。

パーツ	プロパティ	値	用途
`root`	`open_delay`	ミリ秒（整数）	マウスを乗せてから開くまでの待ち時間
`root`	`close_delay`	ミリ秒（整数）	マウスが離れてから閉じるまでの待ち時間
`root`	`open` · `default_open`	`True` / `False`	開閉をStateで決める（制御）· 最初に開いておく（非制御）
`root`	`on_open_change`	イベント	開閉したとき。新しい開閉値（bool）を渡す
`content`	`side` · `align`	位置の名前	現れる側とそろえる位置
`content`	`side_offset` · `align_offset`	整数（px）	リンクとの間隔、そろえた位置からさらにずらす距離
`content`	`size`	`"1"` `"2"` `"3"`	内側の余白の大きさ
`content`	`avoid_collisions` · `collision_padding`	bool · 数値	画面の端にぶつかったら移す、その余白
`content`	`sticky` · `hide_when_detached`	`"partial"` `"always"` · bool	スクロール時に張り付く度合い、リンクが隠れたら隠す

triggerとcontentには共通のイベントしかなく、固有のイベントはありません。

豊かな内容を入れる

contentにはグリッドや画像も入れられます。rx.inset(side="left")でカードの左端まで画像を貼り付け、右側にタイトルと説明を置きます。カードの幅はstyle={"width": 360}のようにcontentへ直接指定します。

Hover over the text to see the card. Hover over me

rx.text(
    "Hover over the text to see the card. ",
    rx.hover_card.root(
        rx.hover_card.trigger(
            rx.link("Hover over me", color_scheme="blue", underline="always"),
        ),
        rx.hover_card.content(
            rx.grid(
                rx.inset(
                    side="left",
                    pr="current",
                    background="url('https://picsum.photos/id/1062/240/320') center/cover",
                    height="full",
                ),
                rx.box(
                    rx.heading("Kitsune", size="3"),
                    rx.text("A curious fox who lives in the workshop and inspects every new part.", size="2"),
                    padding_left="12px",
                ),
                columns="120px 1fr",
            ),
            style={"width": 360},
        ),
    ),
)

開くまでの時間：open_delayとclose_delay

マウスが一瞬通り過ぎただけでカードが出るのは煩わしいものです。open_delayで開くまで、close_delayで閉じるまでの待ち時間をミリ秒で決めます。2つのリンクに順にマウスを乗せて、違いを感じてみてください。

Fast (open_delay=100)Slow (open_delay=1200)

rx.flex(
    rx.hover_card.root(
        rx.hover_card.trigger(rx.link("Fast (open_delay=100)", underline="always")),
        rx.hover_card.content(rx.text("Opened after 100 ms")),
        open_delay=100,
        close_delay=100,
    ),
    rx.hover_card.root(
        rx.hover_card.trigger(rx.link("Slow (open_delay=1200)", underline="always")),
        rx.hover_card.content(rx.text("Opened after 1200 ms")),
        open_delay=1200,
        close_delay=600,
    ),
    spacing="5",
    wrap="wrap",
)

開閉したとき：on_open_change

hover_card.rootのon_open_changeは、開くとTrue、閉じるとFalseを渡します。

Opened or closed: 0 times

Hover card open: no

Hover over the text to see the hover card. Hover over me

class HoverCardEventState(rx.State):
    num_opens: int = 0
    opened: bool = False

    @rx.event
    def count_opens(self, value: bool):
        self.opened = value
        self.num_opens += 1


rx.flex(
    rx.text("Opened or closed: ", HoverCardEventState.num_opens, " times"),
    rx.text("Hover card open: ", rx.cond(HoverCardEventState.opened, "yes", "no")),
    rx.text(
        "Hover over the text to see the hover card. ",
        rx.hover_card.root(
            rx.hover_card.trigger(
                rx.link("Hover over me", color_scheme="blue", underline="always"),
            ),
            rx.hover_card.content(
                rx.text("This is the hover card content."),
            ),
            on_open_change=HoverCardEventState.count_opens,
        ),
    ),
    direction="column",
    spacing="3",
)

Stateで開け閉めする

openにStateの値をつなぐと、スイッチでカードを開いたままにできます。on_open_changeを同じハンドラーにつないであるので、マウスを乗せたり離したりしてもスイッチが一緒に動きます。

Release notes

open

class HoverCardControlState(rx.State):
    pinned: bool = False

    @rx.event
    def set_pinned(self, value: bool):
        self.pinned = value


rx.flex(
    rx.hover_card.root(
        rx.hover_card.trigger(rx.link("Release notes", underline="always")),
        rx.hover_card.content(rx.text("v2.4: faster search, new export button.", size="2")),
        open=HoverCardControlState.pinned,
        on_open_change=HoverCardControlState.set_pinned,
    ),
    rx.switch(checked=HoverCardControlState.pinned, on_change=HoverCardControlState.set_pinned),
    rx.text("open", size="2", color_scheme="gray"),
    spacing="3",
    align="center",
)

注文書を仕上げる

投稿者名のリンクにマウスを乗せると、アバター、名前、自己紹介が載ったカードが現れます。通りすがりのマウスですぐに出ないよう、open_delayを少し長めにします。

Great tutorial! — @mina

rx.text(
    "Great tutorial! — ",
    rx.hover_card.root(
        rx.hover_card.trigger(rx.link("@mina", weight="bold")),
        rx.hover_card.content(
            rx.flex(
                rx.avatar(src="https://picsum.photos/id/64/120/120", fallback="MK", size="4", radius="full"),
                rx.box(
                    rx.heading("Mina Kim", size="3"),
                    rx.text("@mina", size="2", color_scheme="gray"),
                    rx.text("Frontend developer. Writes about Python web apps.", size="2", margin_top="6px"),
                ),
                spacing="3",
            ),
            side="top",
            align="start",
            style={"width": 300},
        ),
        open_delay=400,
    ),
    size="2",
)

工房ノート

root · trigger · contentの3パーツ。マウスを乗せると開き、離すと閉じる（押す必要はない）。
open_delay · close_delay（ミリ秒の整数）で、通りすがりのマウスに反応しないようにする。
位置・大きさはcontent（side、align、side_offset、size "1"~"3"）。
on_open_changeは新しい開閉値（bool）を渡す。openで制御するなら一緒につなぐ。
マウスのないタッチ画面では開かないので、欠かせない内容はリンク先のページにも置く。

← 前へ

オーバーレイ · Popover

オーバーレイ · Dialog

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex