@tawa/mario-form NPM

title: Form 表单 nav: title: 组件 path: /components order: 1 group: title: ' ' path: /form

order: 10

可配置表单控件。

import Form from '@tawa/mario-form';

const fields = [
  {
    key: 'key1',
    name: 'key1',
  },
];

<Form fields={fields} />;

参数	说明	类型	默认值
fields	表单元素字段配置	`FormField[]`	-
nextFields	动态修改 fields 中渲染节点的属性	`FormField[]`	-
labelWidth	FormItem label 宽度，当设置此属性时， `labelCol`属性将失效	`string` \| `number`	-
fieldCol	表单元素布局，同 `<Col>` 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}。此属性在 layout 为`horizontal`时有效	`object`	-
fieldTypes	自定义渲染类型	`object`	-
placeholderPrefix	表单元素 placeholder 生成规则，可覆盖内置规则。内置规则见	`object`	-

其他属性见 antd Form

参数	说明	类型	默认值
key	字段名，支持数组	`NamePath`	-
name	label 标签的文本	`ReactNode`	-
type	渲染类型	`string`	input
valueType	格式化返回值。传入`getValueFromEvent`后该属性将失效。详细说明见下	`'array'` \| `'empty'` \| `'unknown'`	-
props	组件属性，透传给对应 type 的组件。	`object` \| `(value: any, currValues: any) => object`	-
visible	控制表单元素是否显示(不会收集值和校验)。同时保留`hidden`属性（会收集值和校验），visible 属性优先级最高。	`boolean` \| `(value: any, currValues: any) => boolean`	-
labelWidth	同 Form `labelWidth`	`string` \|`number`	-
fieldCol	同 Form `fieldCol`	`object`	-
message	配置校验规则 required 的提示信息, 默认使用 placeholder	`string`	-
render	渲染函数。优先级高于`type`， props 参数需要传递给返回的组件, 形如`render: (props: any) => <CustomedInput {...props} />`	`(props) => ReactNode`	-

其他属性见 antd Form.Item

手动转化表单返回值，仅在使用 form.getFieldsValue()生效。

type 来自内置或自定义类型。其他属性为其对应的组件 props(透传给组件)

import Form from '@tawa/mario-form';

<Form.Field type="number" placeholder="请输入" />;

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago