Descriptions 描述列表
Rue 的 Descriptions 保持当前设计体系偏轻的卡片和信息面板质感,但 API 尽量贴近成熟组件库的详情清单心智。 现在它同时支持 items 和 Descriptions.Item、水平与垂直布局、响应式列数、span 与 filled,以及语义化样式扩展。
Input Shape
items 与 Item 都可用
支持数组声明,也能保持 JSX 结构化书写。
Layout Logic
column、span、filled
既能做整齐的详情表,也能容纳长文案和跨列信息块。
Semantic Styling
不改结构也能换气质
通过 classNames 与 styles,能把同一套信息骨架调成不同场景的密度和调性。
# 基础 items API
最直接的 items 用法:直接用数组描述标签、内容与跨列。
Workspace Pulse
# 带边框与跨列填充
bordered 适合信息更密集的发版、交付和详情页;filled 会自动补满当前行。
Release Shipping Board
# 垂直布局与 JSX 子组件
Descriptions.Item 适合需要在局部插入复杂 JSX 的详情卡片。
Campaign Frame
2 lanes
Headline
Orbit launch week
Owner
Growth Studio
Narrative
聚焦多入口落地页、价格页和 onboarding 通路的同周协同。
Assets
KVMotionFAQ
# 响应式列数与语义样式
在小屏自动折成单列,大屏回到仪表盘式信息面板;同时演示 colon、classNames 和 styles。
Signal Board
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title / extra | 头部标题与右侧扩展位,适合放操作、状态说明或入口按钮。 | any | - / - |
items / children | 支持 items 数组,也支持 Descriptions.Item 子组件。 | DescriptionsItemProps[] / any | [] / - |
column | 每行列数,支持数字和响应式断点对象。 | number | { xs?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number } | 3 |
layout | 切换水平或垂直布局。垂直布局会拆成 label 行和 content 行。 | 'horizontal' | 'vertical' | 'horizontal' |
bordered | 开启更明确的表格分隔边框,适合信息清单与详情页。 | boolean | false |
size | 控制间距与字号,支持 small/default/middle/large 以及 sm/md/lg。 | DescriptionsSize | 'default' |
colon | 控制水平布局下 label 后面的冒号。 | boolean | true |
classNames / styles | 对 root、header、title、extra、body、row、item、label、content 做语义化定制。 | object | - |
labelStyle / contentStyle | 批量覆盖所有 label / content 的内联样式。 | object | - |
item.span | 单项占列数,支持数字、响应式对象和 filled(自动补满当前行)。 | number | responsive | "filled" | 1 |
item.className / labelClassName / contentClassName | 对单条描述的整体、标签区和内容区分别做细化样式增强。 | string | - |