@alicd/cone-detail
v0.1.0
Published
[组件开发文档](https://yuque.antfin-inc.com/cone/chuqrf/ic0qoe)
Downloads
20
Readme
@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 元素占位。