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

데이터 표시

List

rx.listrx.list.unorderedrx.list.orderedrx.list.item

공식 문서

공방 주문서

요리법 페이지에 재료는 점 목록으로, 만드는 순서는 번호 목록으로 보여 주세요.

rx.list는 항목을 위에서 아래로 쌓아 보여 줍니다. 순서가 상관없으면 점이 붙는 rx.list.unordered(HTML ul), 순서가 중요하면 번호가 붙는 rx.list.ordered(HTML ol)를 쓰고, 각 항목은 rx.list.item(HTML li)으로 만듭니다.

Example 1
Example 2
Example 3

Example 1
Example 2
Example 3

rx.flex(
    rx.list.unordered(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    rx.list.ordered(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    spacing="6",
)

속성 바꿔 보기

번호 목록은 표시 방식과 거꾸로 세기를 바꿀 수 있습니다. 시작 번호 start는 아래 절에서 봅니다.

속성 바꿔 보기

Preheat the oven
Mix the batter
Bake for 30 minutes

list_style_type

reversed

rx.list.ordered(
    rx.list.item("Preheat the oven"),
    rx.list.item("Mix the batter"),
    rx.list.item("Bake for 30 minutes"),
    list_style_type="decimal",
    reversed=False,
)

list_style_type으로 표시 모양을, reversed로 거꾸로 세기를 정합니다.

속성	붙는 곳	값	기본값	쓰임
`list_style_type`	세 가지 목록 모두	점: `"disc"` `"circle"` `"square"` `"none"`, 번호: `"decimal"` `"lower-roman"` `"upper-alpha"` …	`list`는 `"none"`, `unordered`는 `"disc"`, `ordered`는 `"decimal"`	앞에 붙는 표시
`items`	세 가지 목록 모두	리스트(State 값도 가능)	없음	자식 대신 항목 글을 한꺼번에 넘긴다
`start`	`ordered`	정수	`1`	첫 번호
`reversed`	`ordered`	`True` / `False`	`False`	번호를 거꾸로 센다
`type`	`ordered`	`"1"` `"a"` `"A"` `"i"` `"I"`	없음	HTML의 번호 종류. 보통은 `list_style_type`을 쓴다

표시 모양

점 목록은 "disc"(기본)·"circle"·"square", 번호 목록은 "decimal"(기본)·"upper-roman"·"lower-alpha" 같은 CSS 값을 받습니다. unordered와 ordered는 표시가 들어갈 자리를 위해 왼쪽에 1.5rem 여백을 둡니다.

disc
disc

circle
circle

square
square

upper-roman
upper-roman

lower-alpha
lower-alpha

rx.flex(
    rx.list.unordered(rx.list.item("disc"), rx.list.item("disc"), list_style_type="disc"),
    rx.list.unordered(rx.list.item("circle"), rx.list.item("circle"), list_style_type="circle"),
    rx.list.unordered(rx.list.item("square"), rx.list.item("square"), list_style_type="square"),
    rx.list.ordered(rx.list.item("upper-roman"), rx.list.item("upper-roman"), list_style_type="upper-roman"),
    rx.list.ordered(rx.list.item("lower-alpha"), rx.list.item("lower-alpha"), list_style_type="lower-alpha"),
    spacing="5",
    wrap="wrap",
)

시작 번호와 거꾸로 세기

start는 첫 번호를 정합니다. 앞 목록에 이어서 번호를 매길 때 씁니다. reversed=True는 큰 번호부터 거꾸로 셉니다. 번호가 글자(upper-alpha)여도 start=3이면 C부터 시작합니다.

Seven
Eight
Nine

Three
Two
One

Alpha
Bravo

rx.flex(
    rx.list.ordered(rx.list.item("Seven"), rx.list.item("Eight"), rx.list.item("Nine"), start=7),
    rx.list.ordered(rx.list.item("Three"), rx.list.item("Two"), rx.list.item("One"), reversed=True),
    rx.list.ordered(rx.list.item("Alpha"), rx.list.item("Bravo"), list_style_type="upper-alpha", start=3),
    spacing="6",
    wrap="wrap",
)

표시 없는 목록

list_style_type="none"을 주면 점도 번호도 사라집니다. 아무 표시가 없는 rx.list()와 사실상 같지만, unordered·ordered는 왼쪽 여백이 남습니다. 공식 문서는 목록이 flex를 바탕으로 해 그 속성을 모두 물려받는다고 적었지만, Reflex 0.10의 목록은 일반 HTML 요소이고 gap 정도만 따로 처리합니다.

Example 1
Example 2
Example 3

Example 1
Example 2
Example 3

rx.hstack(
    rx.list(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    rx.list.unordered(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
        list_style_type="none",
    ),
    spacing="6",
)

아이콘 목록

표시를 없애고 각 항목 앞에 아이콘을 넣으면 체크 목록이 됩니다. rx.list.item 안의 아이콘은 글자와 한 줄에 놓이도록 자동으로 display: inline이 붙습니다.

Allowed
Not
Settings

rx.list(
    rx.list.item(rx.icon("circle_check_big", color="green"), " Allowed"),
    rx.list.item(rx.icon("octagon_x", color="red"), " Not"),
    rx.list.item(rx.icon("settings", color="grey"), " Settings"),
    list_style_type="none",
)

items로 State 목록 그리기

자식을 하나씩 쓰는 대신 items에 리스트를 넘기면, 항목마다 rx.list.item이 만들어집니다. State 값을 넘기면 안에서 rx.foreach가 쓰이므로, 값이 바뀌면 목록도 따라 바뀝니다.

Buy milk
Walk the dog

class ListTodoState(rx.State):
    todos: list[str] = ["Buy milk", "Walk the dog"]
    new_todo: str = ""

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

    @rx.event
    def add_list_todo(self):
        if self.new_todo.strip():
            self.todos = self.todos + [self.new_todo.strip()[:40]]
            self.new_todo = ""

    @rx.event
    def clear_list_todos(self):
        self.todos = []


rx.vstack(
    rx.hstack(
        rx.input(value=ListTodoState.new_todo, on_change=ListTodoState.set_list_new_todo, placeholder="New item"),
        rx.button("Add", on_click=ListTodoState.add_list_todo),
        rx.button("Clear", on_click=ListTodoState.clear_list_todos, variant="soft", color_scheme="gray"),
    ),
    rx.list.ordered(items=ListTodoState.todos),
)

주문서 완성

재료는 순서가 없으니 점 목록, 만드는 법은 순서가 중요하니 번호 목록입니다.

Ingredients

2 eggs
200 g flour
1 cup milk

Steps

Whisk the eggs and milk.
Fold in the flour.
Cook on a hot pan.

rx.flex(
    rx.box(
        rx.text("Ingredients", weight="bold"),
        rx.list.unordered(
            rx.list.item("2 eggs"),
            rx.list.item("200 g flour"),
            rx.list.item("1 cup milk"),
        ),
    ),
    rx.box(
        rx.text("Steps", weight="bold"),
        rx.list.ordered(
            rx.list.item("Whisk the eggs and milk."),
            rx.list.item("Fold in the flour."),
            rx.list.item("Cook on a hot pan."),
        ),
    ),
    spacing="6",
    wrap="wrap",
)

공방 노트

순서 없는 목록은 rx.list.unordered, 순서 있는 목록은 rx.list.ordered, 항목은 rx.list.item.
list_style_type으로 표시 모양을 바꾸고, "none"이면 표시가 사라진다(rx.list의 기본).
ordered에는 start(첫 번호)와 reversed(거꾸로)가 있다.
items=[…]나 items=State.리스트로 항목을 한꺼번에 넘길 수 있다.

← 이전

데이터 표시 · Callout

데이터 표시 · Data List

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex