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

레이아웃

Container

rx.container

공식 문서

공방 주문서

넓은 모니터에서 글이 옆으로 끝없이 퍼지지 않게, 본문 폭을 읽기 좋은 너비로 묶어 주세요.

rx.container는 안쪽 내용의 최대 너비를 묶고, 남는 양옆은 여백으로 둬서 내용을 가운데에 놓습니다. 화면이 최대 너비보다 좁으면 내용도 함께 좁아지므로 반응형 화면에 알맞습니다. 보통 한 페이지의 본문 전체를 감쌉니다.

This content is at most 448px wide.

rx.box(
    rx.container(
        rx.card("This content is at most 448px wide.", width="100%"),
        size="1",
    ),
    background_color="var(--gray-3)",
    width="100%",
)

속성 바꿔 보기

회색 바탕이 바깥 영역이고, 카드가 Container 안쪽입니다. 이 미리보기 칸은 폭이 좁아서 size 3·4는 칸을 다 채운 것처럼 보입니다.

속성 바꿔 보기

Page content

size

padding

rx.box(
    rx.container(
        rx.card("Page content", width="100%"),
        size="1",
        padding="16px",
    ),
    background_color="var(--gray-3)",
    width="100%",
)

size가 클수록 안쪽 최대 너비가 넓어집니다. padding은 Reflex가 기본으로 넣는 안쪽 여백(16px)입니다.

속성	값	기본값	쓰임
`size`	`"1"`(448px) `"2"`(688px) `"3"`(880px) `"4"`(1136px)	`"3"`	안쪽 내용의 최대 너비
`padding`	CSS 길이	`"16px"`	안쪽 여백. Reflex의 `create`가 기본으로 넣는다
`stack_children_full_width`	`True` / `False`	`False`	안의 vstack·hstack과 그 입력칸 같은 자식을 너비 100%로

size는 rx.breakpoints(...)로 화면 폭마다 다르게 줄 수 있습니다. padding과 stack_children_full_width는 Radix 속성이 아니라 설치된 0.10의 rx.container가 더해 주는 인자입니다.

네 가지 크기

공식 문서의 예제입니다. 각 Container가 바깥 너비 안에서 자기 최대 너비까지만 넓어지고, 가운데에 놓입니다.

size 1: max 448px

size 2: max 688px

size 3: max 880px

size 4: max 1136px

rx.box(
    rx.container(rx.card("size 1: max 448px", width="100%"), size="1"),
    rx.container(rx.card("size 2: max 688px", width="100%"), size="2"),
    rx.container(rx.card("size 3: max 880px", width="100%"), size="3"),
    rx.container(rx.card("size 4: max 1136px", width="100%"), size="4"),
    background_color="var(--gray-3)",
    width="100%",
)

안의 스택을 꽉 채우기

Stack은 기본으로 자식을 align="start"로 두어 입력칸이 자기 너비만큼만 차지합니다. stack_children_full_width=True를 주면 Container 안의 스택, 그리고 스택 바로 아래의 div·input·select·textarea·table 자식이 너비 100%가 됩니다. 버튼(button 요소)은 대상이 아닙니다. 왼쪽이 기본, 오른쪽이 켠 것입니다.

rx.flex(
    rx.container(
        rx.vstack(rx.input(placeholder="Name"), rx.text_area(placeholder="Message")),
        size="1",
        background_color="var(--gray-3)",
    ),
    rx.container(
        rx.vstack(rx.input(placeholder="Name"), rx.text_area(placeholder="Message")),
        size="1",
        stack_children_full_width=True,
        background_color="var(--gray-3)",
    ),
    spacing="4",
    width="100%",
)

화면 폭마다 다른 크기

휴대폰에서는 좁게, 넓은 화면에서는 넓게 묶고 싶을 때 size에 rx.breakpoints를 넘깁니다.

1 on phones, 2 from md, 3 from lg

rx.box(
    rx.container(
        rx.card("1 on phones, 2 from md, 3 from lg", width="100%"),
        size=rx.breakpoints(initial="1", md="2", lg="3"),
    ),
    background_color="var(--gray-3)",
    width="100%",
)

주문서 완성

글 한 편을 size="2"(최대 688px)로 묶었습니다. 넓은 모니터에서도 한 줄이 너무 길어지지 않아 읽기 편합니다.

Notes from the workshop

Posted on Monday

A long line of text is hard to read. Keeping the column narrow helps the eye find the next line.

The container keeps this column narrow on wide screens.

rx.box(
    rx.container(
        rx.vstack(
            rx.heading("Notes from the workshop", size="6"),
            rx.text("Posted on Monday", size="2", color="var(--gray-11)"),
            rx.text(
                "A long line of text is hard to read. "
                "Keeping the column narrow helps the eye find the next line.",
            ),
            rx.text("The container keeps this column narrow on wide screens."),
            spacing="3",
        ),
        size="2",
        padding_y="24px",
    ),
    background_color="var(--gray-2)",
    width="100%",
)

공방 노트

rx.container는 내용의 최대 너비를 묶고 가운데에 둔다. 페이지 본문을 감싸는 데 쓴다.
size "1"~"4" = 448·688·880·1136px. 기본은 "3".
Reflex가 padding="16px"을 기본으로 넣는다. 필요하면 바꾼다.
stack_children_full_width=True면 안의 스택과 입력칸 같은 자식이 너비 100%(버튼은 제외).
size=rx.breakpoints(initial="1", lg="3")처럼 화면 폭마다 바꿀 수 있다.

← 이전

레이아웃 · Grid

레이아웃 · Section

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex