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

펼침과 전환

Tabs

rx.tabs.rootrx.tabs.listrx.tabs.triggerrx.tabs.content

공식 문서

공방 주문서

상품 페이지에 '설명', '사양', '리뷰'를 탭으로 나눠, 한 번에 하나만 보이게 해 주세요.

탭은 같은 높이의 관련된 내용 묶음을 겹쳐 두고, 한 번에 하나만 보여 줍니다. 네 부품으로 만듭니다.

rx.tabs.root: 전체를 묶고, 어느 탭이 열렸는지 기억합니다.
rx.tabs.list: 탭 버튼들이 놓이는 줄입니다.
rx.tabs.trigger: 누르면 그 탭을 여는 버튼입니다. value가 이름표입니다.
rx.tabs.content: 탭의 내용입니다. 같은 value의 trigger가 눌렸을 때 보입니다.

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    default_value="tab1",
)

속성 바꿔 보기

orientation과 activation_mode는 root에, size와 loop는 list에, color_scheme과 disabled는 trigger에 줍니다. 탭을 하나 누른 뒤 화살표 키로 옮겨 다녀 보세요.

속성 바꿔 보기

Make changes to your account

orientation

activation_mode

size

loop

color

disable_settings

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Account", value="account", color_scheme="indigo"),
        rx.tabs.trigger("Documents", value="documents", color_scheme="indigo"),
        rx.tabs.trigger("Settings", value="settings", color_scheme="indigo", disabled=False),
        size="2",
        loop=True,
    ),
    rx.box(
        rx.tabs.content(rx.text("Make changes to your account"), value="account"),
        rx.tabs.content(rx.text("Update your documents"), value="documents"),
        rx.tabs.content(rx.text("Edit your personal profile"), value="settings"),
        padding="12px",
    ),
    default_value="account",
    orientation="horizontal",
    activation_mode="automatic",
)

activation_mode가 manual이면 화살표 키로는 초점만 옮겨지고, Enter나 Space를 눌러야 탭이 열립니다. loop를 끄면 끝에서 화살표 키가 멈춥니다.

부품	속성	값	쓰임
`root`	`default_value`	trigger의 value	처음 열릴 탭(비제어)
`root`	`value` + `on_change`	State 값, 이벤트	열린 탭을 State로 다룬다(제어)
`root`	`orientation`	`"horizontal"`(기본) `"vertical"`	탭 줄의 방향과 화살표 키 방향
`root`	`activation_mode`	`"automatic"`(기본) `"manual"`	초점만 옮겨도 열지, 눌러야 열지
`list`	`size`	`"1"` `"2"`(기본)	탭 버튼 크기
`list`	`loop`	`True`(기본) / `False`	끝에서 화살표 키가 처음으로 돌아갈지
`trigger`	`value`	문자열(유일)	이 탭의 이름표
`trigger`	`disabled`	`True` / `False`	누를 수 없게
`trigger`	`color_scheme`	Radix 색 이름	열렸을 때 밑줄 색
`content`	`value`	trigger와 같은 문자열	어느 탭의 내용인지
`content`	`force_mount`	`True` / `False`	닫혀 있어도 화면에서 지우지 않는다

처음 열릴 탭

default_value에 trigger의 value를 주면 그 탭이 처음부터 열립니다. 주지 않으면 아무 탭도 열리지 않은 채 시작하므로, 보통은 꼭 줍니다.

item on tab 2

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    default_value="tab2",
)

세로 탭

orientation="vertical"이면 탭 줄이 왼쪽에 세로로 섭니다. 보이는 방향만이 아니라 키보드 방향도 바뀌어, 위·아래 화살표로 탭을 옮깁니다(가로일 때는 왼쪽·오른쪽). 세로일 때는 trigger마다 content를 빠짐없이 두어야 합니다. 빠진 것이 있으면 탭 줄의 너비가 흔들리는 문제가 생깁니다.

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1", padding_left="16px"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2", padding_left="16px"),
    default_value="tab1",
    orientation="vertical",
)

State로 열린 탭 다루기(제어)

value에 State 값을 주고 on_change에서 그 값을 바꾸면, 열린 탭을 서버가 압니다. 버튼으로 다른 탭을 열거나, 탭이 바뀔 때 다른 일을 할 수 있습니다. on_change는 새로 열린 탭의 value를 넘깁니다.

tab1 selected (changed 0 times)

items on tab 1

class TabsPickState(rx.State):
    value: str = "tab1"
    changes: int = 0

    @rx.event
    def go_tab2(self):
        self.value = "tab2"

    @rx.event
    def change_tab(self, val: str):
        self.value = val
        self.changes += 1


rx.vstack(
    rx.text(TabsPickState.value, " selected (changed ", TabsPickState.changes, " times)"),
    rx.tabs.root(
        rx.tabs.list(
            rx.tabs.trigger("Tab 1", value="tab1"),
            rx.tabs.trigger("Tab 2", value="tab2"),
        ),
        rx.tabs.content(rx.text("items on tab 1"), value="tab1"),
        rx.tabs.content(rx.text("items on tab 2"), value="tab2"),
        value=TabsPickState.value,
        on_change=TabsPickState.change_tab,
        width="100%",
    ),
    rx.button("Jump to Tab 2", on_click=TabsPickState.go_tab2, size="1", variant="soft"),
)

탭 버튼(trigger)

trigger의 value는 탭마다 달라야 하고, 같은 값의 content와 짝을 이룹니다. disabled=True는 누를 수 없게 막고, color_scheme은 열렸을 때 아래에 생기는 밑줄의 색을 바꿉니다. trigger 안에는 아이콘 같은 컴포넌트도 넣을 수 있습니다.

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2", color_scheme="green"),
        rx.tabs.trigger("Tab 3", value="tab3", disabled=True),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    rx.tabs.content(rx.text("item on tab 3"), value="tab3"),
    default_value="tab1",
)

탭 내용(content)과 force_mount

닫힌 탭의 content는 화면에서 지워집니다. 그래서 입력칸에 쓴 글처럼 브라우저에만 있던 것은 탭을 옮기면 사라집니다. force_mount=True이면 닫혀도 지우지 않고 남겨 둡니다. 이때는 닫힌 탭도 그대로 보이므로, data-state='inactive'일 때 숨기는 스타일을 함께 줍니다. 애니메이션 라이브러리로 열고 닫는 모습을 직접 다룰 때도 씁니다.

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Write", value="write"),
        rx.tabs.trigger("Preview", value="preview"),
    ),
    rx.tabs.content(
        rx.el.input(placeholder="Type, then switch tabs", default_value="", padding="6px", margin_top="8px"),
        value="write",
        force_mount=True,
        style={"&[data-state='inactive']": {"display": "none"}},
    ),
    rx.tabs.content(rx.text("The input on the other tab keeps its text.", margin_top="8px"), value="preview"),
    default_value="write",
)

주문서 완성

탭 버튼에 아이콘을 붙이고, 각 내용에 글, 데이터 목록, 배지를 넣었습니다.

A light, waterproof jacket for everyday rain.

rx.card(
    rx.tabs.root(
        rx.tabs.list(
            rx.tabs.trigger(rx.icon("file-text", size=14), "Description", value="desc"),
            rx.tabs.trigger(rx.icon("ruler", size=14), "Specs", value="specs"),
            rx.tabs.trigger(rx.icon("star", size=14), "Reviews", value="reviews"),
        ),
        rx.tabs.content(
            rx.text("A light, waterproof jacket for everyday rain.", size="2"),
            value="desc",
            padding_top="12px",
        ),
        rx.tabs.content(
            rx.data_list.root(
                rx.data_list.item(rx.data_list.label("Weight"), rx.data_list.value("320 g")),
                rx.data_list.item(rx.data_list.label("Material"), rx.data_list.value("Nylon")),
            ),
            value="specs",
            padding_top="12px",
        ),
        rx.tabs.content(
            rx.hstack(rx.badge("4.8", color_scheme="amber"), rx.text("from 214 reviews", size="2")),
            value="reviews",
            padding_top="12px",
        ),
        default_value="desc",
    ),
    max_width="420px",
)

공방 노트

tabs.root > tabs.list > tabs.trigger(value=…) 와 tabs.content(value=…)를 value로 짝짓는다.
default_value로 처음 열 탭(비제어), value + on_change로 State가 다루기(제어).
orientation은 보이는 방향과 화살표 키 방향을 함께 바꾼다. 세로면 content를 빠짐없이.
list: size · loop, trigger: disabled · color_scheme, content: force_mount.

← 이전

데이터 표시 · Moment

펼침과 전환 · Accordion

새 교시·새 강의 소식 받기

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