ReflexKR

Reflex 官方文档

组件工坊：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

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明

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

Built with Reflex