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 例

布局

Box

rx.box

官方文档

工坊订单

请把一段公告文字用浅色背景和圆角包起来，让它和正文一眼就能区分开。

rx.box 是最基础的盒子。它是基于 HTML div 的块级元素，用来把其他组件包在一起，并给这一组加上样式。Box 本身没有专属属性，背景、边距、边框这类 CSS 属性都以关键字参数传入，由此塑造外观。

Hello

rx.box("Hello", background_color="var(--accent-3)", padding="12px", border_radius="8px")

试着改属性

Box 的外观全部由 CSS 样式属性决定。在 Python 里，要把 CSS 名称中的 - 换成 _（background-color → background_color）。

试着改属性

Box

label

background

padding

border

radius

width

align

rx.box(
    "Box",
    background_color="var(--accent-3)",
    padding="12px",
    border="none",
    border_radius="4px",
    width="50%",
    text_align="left",
)

试着改改背景、内边距、边框、圆角和宽度。它们都是 CSS 属性，取值也照搬 CSS 的写法。

属性	取值	默认值	用途
`width` `height`	CSS 长度（`"200px"`、`"50%"`）	随内容	盒子的尺寸
`padding` `margin`	CSS 长度，也可以像 `padding_x`·`margin_top` 这样分开写	`0`	内边距·外边距
`background_color` `background`	颜色名、`var(--tomato-3)`、渐变、`url(…)`	无	背景色·背景图
`border` `border_radius`	`"1px solid var(--gray-7)"`、`"8px"`	无	边框和圆角
`title`	文字	无	鼠标悬停时显示的提示
`hidden` `role` `tab_index`	HTML 属性	无	隐藏、无障碍角色、Tab 键顺序
`on_click` `on_mouse_enter` …	事件处理器	无	所有组件都有的基础事件

指定颜色：CSS 名称与 Radix 颜色

颜色有三种给法："orange" 这样的 CSS 颜色名；var(--tomato-3) 这样的 Radix 颜色变量（或含义相同的 rx.color("plum", 3)）；以及跟随站点主题强调色的 var(--accent-2)。Radix 颜色分 1~12 级，数字越小越浅，适合做背景。

官方文档的示例给最后一个盒子传了 radius="full"，但 Box 并没有 radius 属性，所以不起任何作用。圆角要用 border_radius 来设置。

CSS color

Radix color

Theme color

rx.box(
    rx.box("CSS color", background_color="yellow", border_radius="2px", width="20%", margin="4px", padding="4px"),
    rx.box("CSS color", background_color="orange", border_radius="5px", width="40%", margin="8px", padding="8px"),
    rx.box("Radix color", background_color="var(--tomato-3)", border_radius="5px", width="60%", margin="12px", padding="12px"),
    rx.box("Radix color", background_color=rx.color("plum", 3), border_radius="10px", width="80%", margin="16px", padding="16px"),
    rx.box("Theme color", background_color="var(--accent-2)", border_radius="9999px", width="100%", padding="24px"),
    text_align="center",
    width="100%",
)

背景：渐变与图片

只用一个 CSS background 属性就能铺上渐变或图片。linear-gradient 沿一条直线变色，radial-gradient 从一点向外扩散变色。图片用 url(…) 放入，center/cover 让它以中心为基准铺满整个盒子。

rx.flex(
    rx.box(background="linear-gradient(45deg, var(--tomato-9), var(--plum-9))", width="25%", height="100%"),
    rx.box(background="linear-gradient(red, yellow, blue, orange)", width="25%", height="100%"),
    rx.box(background="radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%)", width="25%", height="100%"),
    rx.box(background="center/cover url('https://picsum.photos/id/1015/300/200')", width="25%", height="100%"),
    spacing="2",
    width="100%",
    height="100px",
)

事件与 HTML 属性

Box 拥有所有组件共有的基础事件（on_click、on_mouse_enter、on_mouse_leave 等）。把鼠标移到下面的盒子上，再点一点试试。设置了 title 后，鼠标停留片刻就会弹出提示。

Move the pointer here

Clicks: 0

class BoxHoverState(rx.State):
    inside: bool = False
    clicks: int = 0

    @rx.event
    def enter(self):
        self.inside = True

    @rx.event
    def leave(self):
        self.inside = False

    @rx.event
    def click(self):
        self.clicks += 1


rx.box(
    rx.text(rx.cond(BoxHoverState.inside, "Pointer inside", "Move the pointer here")),
    rx.text("Clicks: ", BoxHoverState.clicks, size="1"),
    on_mouse_enter=BoxHoverState.enter,
    on_mouse_leave=BoxHoverState.leave,
    on_click=BoxHoverState.click,
    title="I am a box",
    background_color=rx.cond(BoxHoverState.inside, "var(--grass-4)", "var(--gray-3)"),
    padding="16px",
    border_radius="8px",
    cursor="pointer",
)

完成订单

用浅色背景加深色左边框表明这是公告，再用内边距让文字不贴着边框。

Notice

The shop is closed on Monday.

rx.box(
    rx.hstack(
        rx.icon("megaphone", size=18, color="var(--amber-11)"),
        rx.text("Notice", weight="bold"),
        align="center",
    ),
    rx.text("The shop is closed on Monday.", size="2", margin_top="4px"),
    background_color="var(--amber-2)",
    border="1px solid var(--amber-6)",
    border_left="4px solid var(--amber-9)",
    border_radius="8px",
    padding="12px 16px",
    width="100%",
)

工坊笔记

rx.box 是基于 div 的块级盒子，用来打包和加样式。
没有专属属性。width·padding·background_color·border_radius 这类 CSS 属性用 _ 写法传入。
颜色可以用 CSS 名称、var(--tomato-3) 或 rx.color("tomato", 3)，以及主题强调色 var(--accent-N)。
一个 background 就能铺上渐变（linear·radial）和 url(…) 图片。
也能使用 on_click·on_mouse_enter 等基础事件，以及 title·hidden 等 HTML 属性。

← 上一课

课程概览

下一课 →

布局 · Flex

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex