UNPKG

@antdp/antdp-ui

Version:

基于antd封装的组件

78 lines (67 loc) 2.64 kB
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 | - |