@cainiaofe/cn-ui-m
Version:
72 lines (71 loc) • 3.03 kB
JavaScript
import * as React from 'react';
import { CnForm, CnPage, formilyCore } from "../../..";
export var 表单分组 = function () {
var form = React.useMemo(function () {
return formilyCore.createForm({
initialValues: {
isDerived: true,
},
});
}, []);
return (React.createElement(CnPage, { title: "CnForm \u5361\u7247\u5206\u7EC4" },
React.createElement(CnForm, { hasFooterSubmit: true, onSubmit: console.log, form: form, schema: {
type: 'object',
properties: {
card: {
type: 'void',
'x-component': 'CnCard',
'x-component-props': {
title: '第一个分组',
},
properties: {
name: {
title: '姓名',
required: true,
'x-component': 'CnInput',
'x-decorator': 'CnFormItem',
},
address: {
title: '地址',
'x-component': 'CnInputTextArea',
'x-decorator': 'CnFormItem',
'x-component-props': {
tip: '地址的一段解释',
},
},
number: {
title: '数量',
'x-component': 'CnNumberPicker',
'x-decorator': 'CnFormItem',
},
isDerived: {
title: '送货上门',
'x-component': 'CnSwitch',
'x-decorator': 'CnFormItem',
},
},
},
card1: {
type: 'void',
'x-component': 'CnCard',
'x-component-props': {
title: '第二个分组',
},
properties: {
phone: {
title: '手机号',
required: true,
'x-component': 'CnInput',
'x-decorator': 'CnFormItem',
},
validateCode: {
title: '手机验证码',
'x-component': 'CnInput',
'x-decorator': 'CnFormItem',
},
},
},
},
} })));
};
export default { title: 'demo/CnForm' };