0.0.6 • Published 5 years ago
@alicd/crui-detail v0.0.6
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、o ffset 值，如 {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 元素占位。
0.0.6
5 years ago