组件工坊：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.inset官方文档
工坊订单
请在商品卡片上方放一张照片，一直铺满到卡片边缘。
rx.inset 给内部内容加上负外边距，让内容越过外层盒子的内边距，一直铺到边缘。放进 Card 里，图片就会从卡片边框的一端铺到另一端。卡片顶部的照片、底部的地图等需要贴边的内容都用它。
A river between the hills, seen from above.
rx.card(
rx.inset(
rx.image(
src="https://picsum.photos/id/1015/600/300",
alt="River",
width="100%",
height="auto",
display="block",
),
side="top",
pb="current",
),
rx.text("A river between the hills, seen from above."),
width="280px",
)试着改属性
卡片里只放一张图片，改一改 side。side 选择内容要贴住的边缘。top 时上方和左右两侧铺开，left 时左侧和上下铺开，只有对侧（下方、右侧）保留卡片的内边距。x 只铺开左右，y 只铺开上下。卡片 size 越大，内边距越大，差别也越明显。
试着改属性
side
clip
variant
size
rx.card(
rx.inset(
rx.image(src="https://picsum.photos/id/1015/600/300", width="100%", height="auto", display="block"),
side="x",
clip="border-box",
),
variant="surface",
size="3",
width="280px",
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
side | "top" "bottom" "left" "right" "x" "y" | 四边全部 | 内容贴住的边缘。top 是上方加左右，x 只有左右，y 只有上下 |
clip | "border-box" "padding-box" | "border-box" | 铺到边框外沿，还是只铺到边框内侧 |
p px py pt pr pb pl | "current" "0" | 无 | Inset 的内边距。current 表示与父元素的内边距相同 |
所有属性都可以用 rx.breakpoints(...) 按屏幕宽度给出不同的值。Radix Themes 也接受 side="all"，但已安装的 0.10 传入 "all" 会报错。要四边都铺开，省略 side 即可。
朝下方：side="bottom"
side="bottom" 会铺开下方和左右两侧。贴住某一侧边缘时，最好把对侧的内边距设为 "current"。这样没有铺到边缘的那一侧，会保持原本卡片内边距的距离。下面先放文字再放图片，铺开下方，并在上方设置了 pt="current"。
The inset below uses a bottom side.
rx.card(
rx.text("The inset below uses a bottom side."),
rx.inset(
rx.image(
src="https://picsum.photos/id/1015/600/300",
alt="River",
width="100%",
height="auto",
display="block",
),
side="bottom",
pt="current",
),
width="280px",
)朝左·朝右
side="right" 或 "left" 用于把内容和图片横向并排。这时卡片内部要用 direction="row" 的 Flex 来搭。图片一侧把对侧内边距（pl 或 pr）设为 "current"。
This inset uses a right side.
This inset uses a left side.
rx.flex(
rx.card(
rx.flex(
rx.text("This inset uses a right side."),
rx.inset(
rx.box(background="center/cover url('https://picsum.photos/id/1015/300/300')", height="100%"),
width="100%",
side="right",
pl="current",
),
direction="row",
width="100%",
),
width="260px",
),
rx.card(
rx.flex(
rx.inset(
rx.box(background="center/cover url('https://picsum.photos/id/1015/300/300')", height="100%"),
width="100%",
side="left",
pr="current",
),
rx.text("This inset uses a left side."),
direction="row",
width="100%",
),
width="260px",
),
spacing="4",
wrap="wrap",
)current 内边距的用处
紧挨着铺开上方的 Inset 放文字时，默认文字会紧贴图片。设置 pb="current" 后，两者之间会出现与卡片内边距相同的间隙。取值只有 "current" 和 "0" 两种。
No pb: text touches the box.
pb=current: same gap as the card padding.
rx.flex(
rx.card(
rx.inset(rx.box(height="60px", background_color="var(--accent-5)"), side="top"),
rx.text("No pb: text touches the box."),
width="200px",
),
rx.card(
rx.inset(rx.box(height="60px", background_color="var(--accent-5)"), side="top", pb="current"),
rx.text("pb=current: same gap as the card padding."),
width="200px",
),
spacing="4",
wrap="wrap",
)完成订单
照片铺到上方边缘，用 pb="current" 与商品名拉开适当的距离。其余内容仍留在卡片的内边距之内。
Blue mug
$18
rx.card(
rx.inset(
rx.image(src="https://picsum.photos/id/30/600/400", alt="Mug", width="100%", height="auto", display="block"),
side="top",
pb="current",
),
rx.heading("Blue mug", size="3"),
rx.text("$18", color="var(--gray-11)", margin_bottom="8px"),
rx.button("Add to cart", width="100%"),
width="240px",
)工坊笔记
rx.inset 用负外边距把内容铺到父元素（主要是 Card）的边缘。
side 是贴住的边缘：top(上+左右)·bottom·left·right·x(左右)·y(上下)。省略则四边全部（0.10 中 "all" 会报错）。
只铺开一侧时，把对侧内边距（pb·pt·pl·pr）设为 "current"，保住卡片的留白。
left·right 要求卡片内部用 direction="row" 的 Flex 来搭。
clip 取 border-box（铺到边框）·padding-box（边框内侧）。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。