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

펼침과 전환

Accordion

rx.accordion.rootrx.accordion.itemrx.accordion.headerrx.accordion.triggerrx.accordion.iconrx.accordion.content

공식 문서

공방 주문서

고객센터 '자주 묻는 질문'을 질문만 보이게 접어 두고, 누르면 답이 펼쳐지게 해 주세요.

아코디언은 제목을 세로로 쌓아 두고, 제목을 누르면 그 아래 내용이 펼쳐지는 컴포넌트입니다. 자주 묻는 질문이나 설정 묶음처럼 다 펼치면 너무 긴 내용을 접어 둘 때 씁니다. rx.accordion.root 안에 rx.accordion.item을 넣고, 각 item에 header(제목)와 content(내용)를 줍니다.

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    width="300px",
)

속성 바꿔 보기

모두 root에 주는 속성입니다. type을 multiple로 바꾸면 여러 항목을 동시에 펼칠 수 있습니다.

속성 바꿔 보기

type

collapsible

variant

color

radius

show_dividers

disabled

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    type="single",
    collapsible=True,
    variant="classic",
    color_scheme="indigo",
    radius="medium",
    show_dividers=True,
    disabled=False,
    width="300px",
)

collapsible을 끄면 열린 항목을 다시 눌러도 닫히지 않습니다. variant와 color_scheme은 바탕 모양과 색입니다.

부품	속성	값	쓰임
`root`	`type`	`"single"`(기본) `"multiple"`	한 번에 하나만 펼칠지, 여럿을 펼칠지
`root`	`collapsible`	`True` / `False`	열린 항목을 다시 눌러 닫을 수 있게
`root`	`default_value`	item의 value (multiple이면 리스트)	처음 펼쳐 둘 항목
`root`	`value` + `on_value_change`	State 값, 이벤트	펼친 항목을 State로 다룬다
`root`	`disabled`	`True` / `False`	모든 항목을 누를 수 없게
`root`	`orientation`	`"vertical"`(기본) `"horizontal"`	키보드 화살표 방향
`root`	`variant`	`"classic"`(기본) `"soft"` `"surface"` `"outline"` `"ghost"`	바탕 모양
`root`	`color_scheme` · `radius`	Radix 색 이름, 모서리 값	색과 모서리
`root`	`show_dividers`	`True` / `False`	항목 사이의 구분선
`root`	`duration` · `easing`	밀리초(기본 250), CSS easing	펼치고 접는 애니메이션
`item`	`header` · `content`	글 또는 컴포넌트	제목과 내용
`item`	`value`	문자열	이 항목의 이름표. 없으면 무작위 값
`item`	`disabled`	`True` / `False`	이 항목만 누를 수 없게

여러 개 펼치기

type의 기본값 "single"은 한 번에 하나만 펼칩니다. 다른 것을 펼치면 앞의 것은 접힙니다. "multiple"이면 여러 항목을 동시에 펼쳐 둘 수 있습니다.

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    type="multiple",
    collapsible=True,
    width="300px",
)

처음 펼쳐 둘 항목

default_value에 item의 value를 주면 그 항목이 처음부터 펼쳐집니다. 그래서 item에 value를 직접 붙여 두어야 합니다(안 붙이면 Reflex가 무작위 값을 만듭니다). type="multiple"이면 ["item_1", "item_3"]처럼 리스트를 줍니다.

The second accordion item's content

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content", value="item_1"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content", value="item_2"),
    rx.accordion.item(header="Third item", content="The third accordion item's content", value="item_3"),
    default_value="item_2",
    collapsible=True,
    width="300px",
)

다시 닫기와 막기

collapsible=True이면 열린 항목을 다시 눌러 닫을 수 있습니다. False이면 한 번 열린 뒤로는 늘 하나가 열려 있습니다.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="collapsible=True", content="Click the header again to close me."),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="collapsible=False", content="Once open, one item always stays open."),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=False,
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

disabled=True를 root에 주면 모든 항목을, item에 주면 그 항목만 누를 수 없게 됩니다.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="Whole root disabled", content="You cannot open this."),
        rx.accordion.item(header="Second Item", content="You cannot open this either."),
        disabled=True,
        collapsible=True,
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="Disabled item", content="You cannot open this.", disabled=True),
        rx.accordion.item(header="Open me", content="This item still works."),
        collapsible=True,
        color_scheme="blue",
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

방향

orientation은 보이는 모양은 바꾸지 않고 키보드 동작만 바꿉니다. 기본 "vertical"은 위·아래 화살표로, "horizontal"은 왼쪽·오른쪽 화살표로 제목 사이를 옮깁니다. 아래 제목을 하나 누른 뒤 화살표 키를 눌러 보세요.

rx.accordion.root(
    rx.accordion.item(header="First Item", content="Use the left and right arrow keys."),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    orientation="horizontal",
    collapsible=True,
    width="300px",
)

모양과 색

variant는 다섯 가지입니다. classic은 테마 색으로 진하게 채우고, soft는 옅게, surface·outline은 테두리를, ghost는 바탕 없이 그립니다.

rx.grid(
    *[
        rx.accordion.root(
            rx.accordion.item(header=v, content="Variant " + v),
            rx.accordion.item(header="Second Item", content="The second accordion item's content"),
            collapsible=True,
            variant=v,
        )
        for v in ["classic", "soft", "surface", "outline", "ghost"]
    ],
    columns="repeat(auto-fill, minmax(200px, 1fr))",
    spacing="3",
    width="100%",
)

color_scheme은 테마와 상관없이 아코디언의 색을 정합니다.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="grass", content="color_scheme='grass'"),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        color_scheme="grass",
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="crimson", content="color_scheme='crimson'"),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        variant="soft",
        color_scheme="crimson",
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

State로 펼친 항목 다루기

value에 State 값을 주고 on_value_change에서 바꾸면, 어느 항목이 펼쳐졌는지 서버가 압니다. 버튼으로 특정 항목을 펼치거나 모두 접을 수도 있습니다. 모두 접히면 빈 문자열이 옵니다. content에는 글뿐 아니라 버튼 같은 컴포넌트도 넣을 수 있습니다.

Open: item_1

class AccordionOpenState(rx.State):
    value: str = "item_1"

    @rx.event
    def change_accordion(self, value: str | list[str]):
        self.value = value if isinstance(value, str) else ""

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


rx.vstack(
    rx.text("Open: ", rx.cond(AccordionOpenState.value != "", AccordionOpenState.value, "(none)")),
    rx.hstack(
        rx.button("Open 3", on_click=AccordionOpenState.open_accordion_item("item_3"), size="1", variant="soft"),
        rx.button("Close all", on_click=AccordionOpenState.open_accordion_item(""), size="1", variant="soft", color_scheme="gray"),
    ),
    rx.accordion.root(
        rx.accordion.item(header="Is it accessible?", content=rx.button("Test button"), value="item_1"),
        rx.accordion.item(header="Is it unstyled?", content="It is styled by Reflex, and you can change the look.", value="item_2"),
        rx.accordion.item(header="Is it finished?", content="Yes, it is ready to use.", value="item_3"),
        collapsible=True,
        value=AccordionOpenState.value,
        on_value_change=AccordionOpenState.change_accordion,
        width="300px",
    ),
)

부품으로 직접 조립하기

header=와 content=는 지름길입니다. Reflex 0.10에는 그 안을 이루는 부품 rx.accordion.header, rx.accordion.trigger(누르는 자리), rx.accordion.icon(펼침 화살표), rx.accordion.content도 있어서, item의 자식으로 직접 조립할 수 있습니다. 제목에 아이콘을 넣는 등 모양을 자세히 바꿀 때 씁니다. 공식 문서 페이지에는 이 부품들이 나오지 않습니다.

rx.accordion.root(
    rx.accordion.item(
        rx.accordion.header(
            rx.accordion.trigger(
                rx.hstack(rx.icon("package", size=16), rx.text("Custom header"), align="center"),
                rx.accordion.icon(),
            ),
        ),
        rx.accordion.content(
            rx.text("Built from header, trigger, icon and content."),
        ),
        value="parts",
    ),
    collapsible=True,
    width="300px",
)

주문서 완성

여러 질문을 함께 펼쳐 볼 수 있게 multiple로 두고, ghost와 구분선으로 가볍게 꾸몄습니다.

rx.accordion.root(
    rx.accordion.item(
        header="How long does shipping take?",
        content="Orders ship within 1 business day and arrive in 2 to 4 days.",
        value="shipping",
    ),
    rx.accordion.item(
        header="Can I return an item?",
        content="Yes. You can return unused items within 30 days.",
        value="returns",
    ),
    rx.accordion.item(
        header="Do you ship abroad?",
        content="Not yet. We only ship within the country for now.",
        value="abroad",
    ),
    type="multiple",
    collapsible=True,
    variant="ghost",
    show_dividers=True,
    width="100%",
    max_width="460px",
)

공방 노트

accordion.root 안에 accordion.item(header=…, content=…)을 넣는다.
type: single(기본) · multiple, collapsible=True면 다시 눌러 닫힌다.
default_value나 value를 쓰려면 item에 value를 직접 붙인다. 제어는 value + on_value_change.
orientation은 키보드 방향만 바꾼다. variant 다섯 가지, color_scheme, show_dividers.
더 자세한 모양은 header · trigger · icon · content 부품으로 조립(0.10).

← 이전

펼침과 전환 · Tabs

펼침과 전환 · Segmented Control

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex