@antdp/antdp-ui
Version:
基于antd封装的组件
78 lines (67 loc) • 2.64 kB
Markdown
FormDetail 快速详情表单
---
快速生成详情表单表单。
## 基础示例
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```tsx mdx:preview
import React, { useRef, useState } from 'react';
import { FormDetail } from '@antdp/antdp-ui'
const FormDetailDemo = () => {
return (
<FormDetail
isView={true}
formDatas={[
{
label: "备注",
name: "remark",
type: "input",
initialValue: 'zz爱ff',
},
{
label: "水果",
name: "fruit",
type: "select",
options: [{ label: "苹果", value: 1 }],
initialValue: 1
},
{
label: "蔬菜",
name: "fruits",
type: "radio",
options: [{ label: "青菜", value: 1 }, { label: "黄瓜", value: 2 }],
initialValue: 2
}
]}
/>
)
}
export default FormDetailDemo;
```
<!--End-->
## Props
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------- | -------- | -------- |
| formDatas | 表单集合 | `Array<itemsProps & any>` |- |
| collapseAttributes | antd collapse 组件属性集合 | Object | - |
| panelAttributes | antd collapse.panel 组件属性集合 | Object | - |
| visible | 折叠表单下是否初始化选中面板 | boolean | false |
| colspan | 表单单行排列 | number | - |
| header | 组件头部标题 | `React.ReactNode` | - |
| defaultFormItemLayout | 自定义表单栅格宽度占比,参照 antd 栅格布局 | Object | - |
| defaultFormLayout | 自定义表单排列方式 | FormLayout | - |
| size | 尺寸 | number | - |
| type | 表单类型:modal | cardform | CardPro | string | - |
| extra | antd collapse.panel 自定义渲染每个面板右上角的内容 | Object | - |
### itemsProps
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------- | -------- | -------- |
| defaultcolspan | 表单默认列span | number |- |
| label | 表单元素标题 | string | - |
| name | 表单名称 antd from 组件 getFieldDecorator 第一个参数 | string | - |
| initialValue | 表单初始值 | string | any | - |
| full | 表单是否独占一行 | boolean | - |
| hideInForm | 表单隐藏 | boolean | - |
| attributes | input select 等表单组件属性集合 | T | any | - |
| type |列表需要展示的其他组件,如:(Checkbox,Radio,Select等)| string | undefined | - |
| options | ?? | `Array<{ label: string, value: string | number }>` | - |
| span | 设置列表的占位格数| number | - |