ReflexKR

컴포넌트 공방: 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

오버레이

Drawer

rx.drawer.rootrx.drawer.triggerrx.drawer.overlayrx.drawer.portalrx.drawer.contentrx.drawer.close

공식 문서

공방 주문서

휴대폰 쇼핑 화면에서 '필터' 버튼을 누르면 아래에서 판이 올라와, 정렬과 재고 조건을 고르게 해 주세요.

rx.drawer는 화면 가장자리에서 미끄러져 들어오는 판입니다. 옆에서 나오는 메뉴, 아래에서 올라오는 선택판처럼 큰 내용을 잠시 꺼내 둘 때 씁니다. 손가락이나 마우스로 끌어서 닫을 수도 있습니다. Reflex는 이 컴포넌트를 Vaul 라이브러리로 만듭니다.

drawer.root: 모든 부품을 감쌉니다. 방향(direction)과 열림 상태를 여기에 줍니다.
drawer.trigger: 누르면 드로어를 여는 요소를 감쌉니다.
drawer.overlay: 열려 있는 동안 뒤 화면을 덮는 반투명 막입니다.
drawer.portal: 내용을 페이지 맨 바깥에 그려, 다른 요소에 가리지 않게 합니다.
drawer.content: 들어오는 판 자체입니다.
drawer.close: 누르면 드로어를 닫는 요소를 감쌉니다.

drawer.content는 기본으로 화면 전체를 덮도록(position: fixed, 네 변 0) 놓입니다. 그래서 판의 크기는 반대쪽 변을 "auto"로 풀고 너비나 높이를 직접 정합니다. 왼쪽에서 나오는 판이라면 right="auto"와 width를 줍니다.

rx.drawer.root(
    rx.drawer.trigger(rx.button("Open Drawer")),
    rx.drawer.overlay(z_index="5"),
    rx.drawer.portal(
        rx.drawer.content(
            rx.flex(
                rx.drawer.close(rx.box(rx.button("Close"))),
                align_items="start",
                direction="column",
            ),
            top="auto",
            right="auto",
            height="100%",
            width="20em",
            padding="2em",
            background_color=rx.color("gray", 2),
        )
    ),
    direction="left",
)

속성 바꿔 보기

오른쪽에서 나오는 판(direction="right", left="auto")의 너비와 색을 바꿔 봅니다. modal을 끄면 드로어가 열린 채로 뒤 화면을 누르고 스크롤할 수 있습니다.

속성 바꿔 보기

title

width

color

modal

rx.drawer.root(
    rx.drawer.trigger(rx.button("Open panel")),
    rx.drawer.overlay(),
    rx.drawer.portal(
        rx.drawer.content(
            rx.flex(
                rx.drawer.title("Settings"),
                rx.drawer.description("Drag it to the right or press Esc to close."),
                rx.drawer.close(rx.button("Close", size="1")),
                direction="column",
                align_items="start",
                spacing="3",
            ),
            left="auto",
            height="100%",
            width="20em",
            padding="2em",
            background_color=rx.color("gray", 3),
        ),
    ),
    direction="right",
    modal=True,
)

판의 크기와 색은 drawer.content의 스타일 속성으로 정합니다. modal은 drawer.root에 줍니다.

속성(root)	값	기본값	쓰임
`direction`	`"top"` `"bottom"` `"left"` `"right"`	`"bottom"`	들어오는 방향. 끌어서 닫는 방향도 정한다
`open` · `default_open`	`True` / `False`	-	열림을 State로 정하기(제어) · 처음에 열어 두기
`modal`	`True` / `False`	`True`	`False`면 열린 채로 바깥을 누르고 스크롤할 수 있다
`dismissible`	`True` / `False`	-	`False`면 끌기·바깥 누르기·Esc로 닫히지 않는다(`open`과 함께 쓴다)
`handle_only`	`True` / `False`	-	`True`면 `drawer.handle`로만 끌 수 있다
`snap_points`	0~1 사이 숫자나 `"px"` 목록	-	멈춰 설 높이들(파이썬 값으로만, State 값 불가)
`fade_from_index`	정수	마지막 지점	몇 번째 멈춤 지점부터 배경을 어둡게 할지
`close_threshold`	0~1	-	얼마나 끌면 닫힐지
`scroll_lock_timeout`	밀리초	`500`	판 안을 스크롤한 뒤 끌기를 막는 시간
`should_scale_background`	`True` / `False`	-	뒤 화면을 살짝 줄이는 효과(`vaul-drawer-wrapper` 필요)
`prevent_scroll_restoration`	`True` / `False`	`True`	닫힌 뒤 스크롤 위치 복원 막기
`on_open_change`	이벤트	-	열리거나 닫힐 때. 새 열림 값(bool)을 넘긴다
`on_animation_end`	이벤트	-	열림·닫힘 움직임이 끝났을 때. 그때의 열림 값을 넘긴다

drawer.content에는 on_open_auto_focus, on_close_auto_focus, on_escape_key_down, on_pointer_down_outside, on_interact_outside 이벤트가 있습니다. 다른 부품은 as_child 정도만 받습니다.

네 방향

direction마다 판을 붙일 변이 달라지므로, 반대쪽 변을 "auto"로 풀어 줍니다. 위·아래에서 나오는 판은 너비 대신 높이를 정합니다. 네 드로어를 만드는 일은 같아서, 작은 함수 하나로 묶었습니다.

def drawer_edge_demo(side: str, **position):
    return rx.drawer.root(
        rx.drawer.trigger(rx.button(side, variant="soft")),
        rx.drawer.overlay(),
        rx.drawer.portal(
            rx.drawer.content(
                rx.flex(
                    rx.drawer.title(f"From the {side}"),
                    rx.drawer.close(rx.button("Close", size="1")),
                    direction="column",
                    align_items="start",
                    spacing="3",
                ),
                padding="2em",
                background_color=rx.color("gray", 2),
                **position,
            ),
        ),
        direction=side,
    )


rx.flex(
    drawer_edge_demo("left", right="auto", width="16em"),
    drawer_edge_demo("right", left="auto", width="16em"),
    drawer_edge_demo("top", bottom="auto", height="30%"),
    drawer_edge_demo("bottom", top="auto", height="30%"),
    spacing="3",
    wrap="wrap",
)

제목, 설명, 손잡이

공식 문서의 부품 목록에는 없지만, 0.10에는 drawer.title, drawer.description, drawer.handle도 있습니다. 제목과 설명은 화면 읽기 프로그램이 읽어 주고, 손잡이는 판 위쪽에 끌 수 있는 막대를 그립니다. handle_only=True를 주면 손잡이로만 끌 수 있어서, 판 안의 버튼을 누르다가 실수로 닫히는 일이 줄어듭니다.

rx.drawer.root(
    rx.drawer.trigger(rx.button("Open sheet")),
    rx.drawer.overlay(),
    rx.drawer.portal(
        rx.drawer.content(
            rx.flex(
                rx.drawer.handle(),
                rx.drawer.title("Share this page"),
                rx.drawer.description("Drag the handle down to close the sheet."),
                rx.flex(
                    rx.button(rx.icon("link"), "Copy link", variant="soft"),
                    rx.button(rx.icon("mail"), "Email", variant="soft"),
                    spacing="3",
                ),
                direction="column",
                spacing="3",
                width="100%",
            ),
            top="auto",
            height="auto",
            padding="1.5em",
            background_color=rx.color("gray", 2),
            border_radius="12px 12px 0 0",
        ),
    ),
    handle_only=True,
)

State로 열고 닫기: 사이드 메뉴

open에 State 값을 연결하면 링크를 누를 때 코드로 드로어를 닫을 수 있습니다. on_open_change를 함께 연결해서 트리거 버튼, Close 버튼, Esc 키로 바뀐 열림 값도 State에 돌아오게 합니다. modal=False이므로 드로어가 열린 채로 페이지를 스크롤할 수 있고, 링크를 누르면 드로어가 닫히며 그 절로 이동합니다.

Section 1

Section 2

class DrawerSidebarState(rx.State):
    is_open: bool = False

    @rx.event
    def set_is_open(self, value: bool):
        self.is_open = value

    @rx.event
    def close_drawer(self):
        self.is_open = False


rx.vstack(
    rx.drawer.root(
        rx.drawer.trigger(rx.button("Open Drawer")),
        rx.drawer.overlay(),
        rx.drawer.portal(
            rx.drawer.content(
                rx.flex(
                    rx.drawer.close(rx.button("Close")),
                    rx.link("Section 1", href="#drawer-section-1", on_click=DrawerSidebarState.close_drawer),
                    rx.link("Section 2", href="#drawer-section-2", on_click=DrawerSidebarState.close_drawer),
                    align_items="start",
                    direction="column",
                    spacing="3",
                ),
                right="auto",
                height="100%",
                width="16em",
                padding="2em",
                background_color=rx.color("grass", 4),
            ),
        ),
        open=DrawerSidebarState.is_open,
        on_open_change=DrawerSidebarState.set_is_open,
        direction="left",
        modal=False,
    ),
    rx.section(rx.heading("Section 1", size="5"), id="drawer-section-1", height="160px", padding="1em 0"),
    rx.section(rx.heading("Section 2", size="5"), id="drawer-section-2", height="160px", padding="1em 0"),
)

주문서 완성

아래에서 올라오는 필터 판입니다. 스위치와 라디오로 고른 값은 바로 State에 들어가고, 'Show results'를 누르면 핸들러가 self.open = False로 판을 내립니다. 판을 끌어내려도 같은 값이 남습니다.

Sort: Newest

class DrawerFilterState(rx.State):
    open: bool = False
    in_stock: bool = False
    sort: str = "Newest"

    @rx.event
    def set_open(self, value: bool):
        self.open = value

    @rx.event
    def set_in_stock(self, value: bool):
        self.in_stock = value

    @rx.event
    def set_sort(self, value: str):
        self.sort = value

    @rx.event
    def apply(self):
        self.open = False


rx.flex(
    rx.text("Sort: ", DrawerFilterState.sort, rx.cond(DrawerFilterState.in_stock, " · in stock only", ""), size="2"),
    rx.drawer.root(
        rx.drawer.trigger(rx.button(rx.icon("sliders-horizontal"), "Filters", variant="outline")),
        rx.drawer.overlay(),
        rx.drawer.portal(
            rx.drawer.content(
                rx.flex(
                    rx.drawer.handle(),
                    rx.drawer.title("Filters"),
                    rx.flex(rx.switch(checked=DrawerFilterState.in_stock, on_change=DrawerFilterState.set_in_stock),
                            rx.text("In stock only", size="2"), spacing="2", align="center"),
                    rx.radio(["Newest", "Price: low", "Price: high"], value=DrawerFilterState.sort,
                             on_change=DrawerFilterState.set_sort, direction="row"),
                    rx.button("Show results", on_click=DrawerFilterState.apply, width="100%"),
                    direction="column",
                    spacing="4",
                    width="100%",
                    max_width="480px",
                    margin="0 auto",
                ),
                top="auto",
                height="auto",
                padding="1.5em",
                background_color=rx.color("gray", 2),
                border_radius="12px 12px 0 0",
            ),
        ),
        open=DrawerFilterState.open,
        on_open_change=DrawerFilterState.set_open,
        direction="bottom",
    ),
    spacing="3",
    align="center",
    wrap="wrap",
)

공방 노트

root(direction) > trigger · overlay · portal > content > close. 방향 기본값은 bottom.
content는 화면 전체를 덮도록 놓이므로, 반대쪽 변을 "auto"로 풀고 width나 height를 정한다.
open + on_open_change로 제어하면 링크나 버튼의 핸들러에서 드로어를 닫을 수 있다.
modal=False는 열린 채로 뒤 화면을 쓰게 하고, handle_only=True는 손잡이로만 끌게 한다.
snap_points는 컴파일할 때 정하는 값이라 State 값을 넣을 수 없다.

← 이전

오버레이 · Alert Dialog

오버레이 · Dropdown Menu

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex