组件工坊：Reflex 组件库 100 例
·
课程概览
布局
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
排版
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
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
rx.text.kbd官方文档
工坊订单
请在笔记应用的帮助窗口里做一张快捷键表，把功能名称和快捷键并排列出。
rx.text.kbd 把键盘按键或快捷键显示成键帽的样子，渲染为 HTML <kbd> 标签。适合帮助文档、快捷键说明、教程里“请按这个键”之类的位置。
rx.text.kbd("Shift + Tab")Kbd 的外观属性只有 size 一个。也可以改改文字，写上别的按键。
试着改属性
label
size
rx.text.kbd("Ctrl + K", size="3")| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
| 子元素 | 字符串、State 值 | 必填 | 按键名称 |
size | "1" ~ "9" | 继承 | 键帽和文字的大小 |
与 Text、Heading 不同，0.10 的 Kbd 类型不支持给 size 传按屏幕宽度区分的值（dict）。事件只有基础事件。
size 为 "1"~"9"。越大，相对行高和字间距越小。不设时沿用外层文字的大小。
rx.flex(
rx.text.kbd("Shift + Tab", size="1"),
rx.text.kbd("Shift + Tab", size="3"),
rx.text.kbd("Shift + Tab", size="5"),
rx.text.kbd("Shift + Tab", size="7"),
rx.text.kbd("Shift + Tab", size="9"),
direction="column",
align="start",
spacing="3",
)作为子元素放进 rx.text，键帽就会出现在句子中。可以每个键分别包起来，也可以把整个组合一次包住。
Press Ctrl + S to save.
Undo with Ctrl + Z, redo with Ctrl + Y.
rx.flex(
rx.text("Press ", rx.text.kbd("Ctrl"), " + ", rx.text.kbd("S"), " to save.", size="3"),
rx.text("Undo with ", rx.text.kbd("Ctrl + Z"), ", redo with ", rx.text.kbd("Ctrl + Y"), ".", size="2", color_scheme="gray"),
direction="column",
spacing="3",
)输入框的 on_key_down 会传来按下的键名，以及 Ctrl、Alt、Shift、Meta 是否同时按下。把这些值存进 State，再用 rx.text.kbd 显示出来。点一下输入框，然后试着按 Shift+K 或 Alt+1。
class KbdKeyState(rx.State):
key: str = "?"
mods: list[str] = []
@rx.event
def press(self, key: str, info: rx.event.KeyInputInfo):
names = {"ctrl_key": "Control", "alt_key": "Alt", "shift_key": "Shift", "meta_key": "Meta"}
self.mods = [name for flag, name in names.items() if info.get(flag) and name != key]
self.key = "Space" if key == " " else key
rx.flex(
rx.input(placeholder="Click here and press any keys", on_key_down=KbdKeyState.press, width="260px"),
rx.flex(
rx.foreach(KbdKeyState.mods, lambda m: rx.fragment(rx.text.kbd(m, size="4"), rx.text("+", size="4"))),
rx.text.kbd(KbdKeyState.key, size="4"),
spacing="2",
align="center",
),
direction="column",
align="start",
spacing="3",
)把功能名称和快捷键分别放进 rx.table 的两列，只给快捷键那一列套上 rx.text.kbd。
rx.table.root(
rx.table.body(
rx.table.row(rx.table.cell("Save"), rx.table.cell(rx.text.kbd("Ctrl + S"))),
rx.table.row(rx.table.cell("Search"), rx.table.cell(rx.text.kbd("Ctrl + K"))),
rx.table.row(rx.table.cell("New note"), rx.table.cell(rx.text.kbd("Ctrl + N"))),
rx.table.row(rx.table.cell("Close"), rx.table.cell(rx.text.kbd("Esc"))),
),
size="1",
max_width="320px",
)工坊笔记
rx.text.kbd("…") 是键帽样式的按键名（<kbd>）。
外观属性只有 size "1"~"9"。不设时沿用外层文字大小。
作为子元素放进句子里。可以逐个按键包，也可以整个组合一起包。
用 on_key_down(key, info) 接收按下的键，再通过 State 显示出来。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。