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 例

排版

Link

rx.linkrx.redirect

官方文档

工坊订单

请在网站最底部的页脚里放两个站内页面链接，再放一个在新标签页打开的外部链接。

rx.link 是点击后跳转到别处的文字。在 href 里写目标地址：可以是外部地址（https://…），也可以是本应用内的路径（/courses），或者同一页面中的某个位置（#id）。

Reflex Home Page.

rx.link("Reflex Home Page.", href="https://reflex.dev/")

试着改属性

链接的外观就是和 rx.text 类似的文字属性，再加上 underline。打开 is_external 后会在新标签页中打开。

试着改属性

Visit Reflex

label

underline

size

weight

trim

color

high_contrast

is_external

rx.link("Visit Reflex", href="https://reflex.dev/", underline="auto", size="3", weight="regular", trim="normal", color_scheme="indigo", high_contrast=False, is_external=True)

underline 决定下划线何时出现。auto 由 Radix 视情况决定，通常是鼠标悬停时出现。

属性	取值	默认值	用途
`href`	地址字符串	无	目标位置：外部地址、应用内路径、`#id`
`is_external`	`True` / `False`	`False`	在新标签页打开（`target="_blank"`）
`underline`	`"auto"` `"hover"` `"always"` `"none"`	`"auto"`	下划线何时出现
`size`	`"1"` ~ `"9"`	继承	字号
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	继承	粗细
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	裁掉上下由行高带来的留白
`color_scheme`	Radix 颜色名	主题色	文字颜色
`high_contrast`	`True` / `False`	`False`	加大与背景的对比度
`target`	`"_self"` `"_blank"` `"_parent"` `"_top"`	无	直接指定打开位置
`rel`	字符串	无	链接关系（`"nofollow"`、`"noopener"` …）
`download`	`True` 或文件名	无	不跳转，改为下载文件
`referrer_policy` · `href_lang` · `media` · `ping`	HTML `<a>` 属性	无	原样传给 `<a>`

事件只有 on_click 这类基础事件。

跳到应用内的其他页面

href 以 / 开头时表示本应用的路径。不必写完整地址，Reflex 也不会重新加载页面，只切换画面（客户端导航），所以比外部链接跳转得更快。

Home Courses

rx.flex(
    rx.link("Home", href="/"),
    rx.link("Courses", href="/courses"),
    spacing="4",
)

包裹其他组件

子元素不放文字而放按钮或卡片时，整个组件都会变成链接。包裹卡片这样的大块内容时，通常用 underline="none" 去掉下划线。

Reflex docs

Open the official docs

rx.flex(
    rx.link(rx.button("Example"), href="https://reflex.dev/"),
    rx.link(
        rx.card(rx.text("Reflex docs", weight="bold"), rx.text("Open the official docs", size="2", color_scheme="gray")),
        href="https://reflex.dev/docs/",
        is_external=True,
        underline="none",
    ),
    spacing="4",
    align="center",
    wrap="wrap",
)

锚点：跳到页面内的某处

给某个组件设上 id="lib-link-footer"，href="#lib-link-footer" 的链接就会把画面移到那个位置。如果是其他页面中的某处，就像 "/courses/some-page#lib-link-footer" 这样在路径后面接上 # 和 id。点击下面的链接，会跳到本页末尾“完成订单”的示例。

Jump to the footer below

rx.link("Jump to the footer below", href="#lib-link-footer")

下划线、大小、颜色

比较一下 underline 的四种取值。hover 要鼠标悬停才显示下划线，auto 通常也是这样。大小、粗细、颜色、对比度和 trim 的用法与 rx.text 相同。

underline auto underline hover underline always underline none

rx.flex(
    rx.link("underline auto", href="#", underline="auto"),
    rx.link("underline hover", href="#", underline="hover"),
    rx.link("underline always", href="#", underline="always"),
    rx.link("underline none", href="#", underline="none"),
    direction="column",
    spacing="3",
)

Size 2, regular Size 4, medium Size 6, bold crimson high contrast With Trim

rx.flex(
    rx.link("Size 2, regular", href="#", size="2"),
    rx.link("Size 4, medium", href="#", size="4", weight="medium"),
    rx.link("Size 6, bold", href="#", size="6", weight="bold"),
    rx.link("crimson", href="#", color_scheme="crimson"),
    rx.link("high contrast", href="#", high_contrast=True),
    rx.link(
        "With Trim",
        href="#",
        trim="both",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

从 State 跳转：rx.redirect

像“保存后跳转”这样，要在事件处理器做完工作后再换页面，就不用链接，而是返回 rx.redirect("路径")。点击下面的按钮会跳回首页。

class LinkRedirectState(rx.State):
    @rx.event
    def go_home(self):
        return rx.redirect("/")


rx.button(rx.icon("house"), "Save and go home", on_click=LinkRedirectState.go_home)

完成订单

站内链接用 href="/…"，外部链接用 is_external=True 在新标签页打开。页脚链接用灰色加 underline="hover"，显得低调。这个页脚带有 id="lib-link-footer"，上面的锚点链接就跳到这里。

rx.flex(
    rx.text("Shop", weight="bold", size="2"),
    rx.link("Home", href="/", size="2", color_scheme="gray", underline="hover"),
    rx.link("Courses", href="/courses", size="2", color_scheme="gray", underline="hover"),
    rx.spacer(),
    rx.link("GitHub", rx.icon("external-link", size=14), href="https://github.com/reflex-dev/reflex", is_external=True, size="2",
            color_scheme="gray", underline="hover", display="flex", align_items="center", gap="4px"),
    id="lib-link-footer",
    spacing="4",
    align="center",
    wrap="wrap",
    padding="12px 16px",
    border_top=f"1px solid {rx.color('gray', 6)}",
    width="100%",
)

工坊笔记

rx.link("文字", href="…")。外部地址、应用内路径（/…）、同页的 #id 都可以。
应用内路径跳转时不会重新加载页面。新标签页用 is_external=True。
underline：auto · hover · always · none。其余文字属性与 rx.text 相同。
把按钮、卡片放进子元素，整个就成了链接。
在处理器里跳转用 return rx.redirect("/路径")。

← 上一课

排版 · Heading

下一课 →

排版 · Code

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex