@alicd/cone-detail

组件开发文档

---

• name: 详情区
• tag_name: Detail
• terminal: pc
• category: detail
• scene: common

---

符合 Rookie 设计标准的详情展示组件。

规则

API

Detail

属性	说明	类型	默认值
className	自定义 class	string	N/A
style	自定义内联样式	object	N/A
column	设置详情区的列数	number	3
labelAlign	决定标题的位置，位于内容左边（水平布局）还是上边（垂直布局）	"top" 或 "left"	"top"
labelTextAlign	标签文字的对齐方式	"left" 或 "right" 或 "center"	left
wrapperTextAlign	内容区域文字的对齐方式	"left" 或 "right" 或 "center"	left
labelCol	label 标签布局，通 <Col> 组件，设置 span、offset 值，如 {span: 8, offset: 16}，该项仅在 labelAlign 为 left 时有效	object	N/A
wrapperCol	设置内容项的样式，用法同 labelCol	object	N/A
dataSource	允许从数据源中获取详情内容数据	object	N/A
title	整个详情区域的标题	ReactNode	默认为空
columnSpans	自定义列宽，如需要 4 列按 4:6:6:8 分布，则设置为 [4, 6, 6, 8]	number[]	默认所有列的宽度相等
direction	设置放置 Detail.Item 的顺序，为 "ver" 则第二个 Item 在第一个 Item 下方，为 "hoz" 则第二个 Item 在第一个 Item 右方。	"ver" 或 "hoz"	"hoz"

Detail.Item

属性	说明	类型	默认值
className	自定义 class	string	N/A
style	自定义内联样式	object	N/A
label	该详情项的标题	ReactNode	N/A
labelAlign	决定标题的位置，位于内容左边（水平布局）还是上边（垂直布局）	"top" 或 "left"	默认为 Detail 组件的 labelAlign 属性。
labelTextAlign	标签文字的对齐方式	"left" 或 "right" 或 "center"	默认为 Detail 组件的 labelTextAlign 属性
wrapperTextAlign	内容区域文字的对齐方式	"left" 或 "right" 或 "center"	默认为 Detail 组件的 wrapperTextAlign 属性
labelCol	label 标签布局，通 <Col> 组件，设置 span、offset 值，如 {span: 8, offset: 16}，该项仅在 labelAlign 为 left 时有效	object	默认为 Detail 组件的 labelCol 属性
wrapperCol	设置内容项的样式，用法同 labelCol	object	默认为 Detail 组件的 wrapperCol 属性
dataIndex	在使用 dataSource 时，指定该项对应的字段	string	N/A
render	自定义内容渲染逻辑	(value: any, dataIndex: string, dataSource: object) => Element	默认直接返回 value

Detail.Placeholder

Detail 组件默认情况下将所有子元素项目从左到右、从上到下排布。有时出于设计需要，会存在若干空白的单元格，此时可使用 Placeholder 元素占位。