category: Components type: UI Views component: Base chinese: 详情列表 english: Detail

符合 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 元素占位。