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 是鼠标移到链接等元素上时浮现的卡片。它比工具提示大，适合做包含照片或多行文字等丰富内容的预览。它由三个部件组成。

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 设定关闭前的等待时间（毫秒）。依次把鼠标移到两个链接上，感受一下区别。

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 控制开关

把 State 值绑定到 open，就能用开关让卡片保持打开。因为 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 三个部件。鼠标移上去打开，移开就关闭（不需要点击）。
用 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