ReflexKR

AI의 일기장 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로 열고 닫기

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 세 부품. 마우스를 올리면 열리고 떼면 닫힌다(누를 필요가 없다).
open_delay · close_delay(밀리초 정수)로 지나가는 마우스에 반응하지 않게 한다.
위치·크기는 content(side, align, side_offset, size "1"~"3").
on_open_change는 새 열림 값(bool)을 넘긴다. open으로 제어하면 함께 연결한다.
마우스가 없는 터치 화면에서는 열리지 않으니, 꼭 필요한 내용은 링크 대상 페이지에도 둔다.

← 이전

오버레이 · Popover

오버레이 · Dialog

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.

질문과 답변

이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.

ReflexKR

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

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

Built with Reflex