Skip to content

Commit 71be0a5

Browse files
author
Alex
authored
feat(antd): FormItem adds more attribute configuration (#3727)
1 parent 21cff36 commit 71be0a5

File tree

7 files changed

+277
-122
lines changed

7 files changed

+277
-122
lines changed

‎packages/antd/docs/components/FormItem.md

+100-33
Large diffs are not rendered by default.

‎packages/antd/docs/components/FormItem.zh-CN.md

+101-33
Original file line numberDiff line numberDiff line change
@@ -374,6 +374,62 @@ export default () => {
374374
}
375375
```
376376

377+
## 必填样式
378+
379+
```tsx
380+
import React, { useState } from 'react'
381+
import { Input, FormItem, FormLayout } from '@formily/antd'
382+
import { Radio, ConfigProvider } from 'antd'
383+
import zhCN from 'antd/es/locale/zh_CN'
384+
import { createForm } from '@formily/core'
385+
import { FormProvider, createSchemaField } from '@formily/react'
386+
387+
const SchemaField = createSchemaField({
388+
components: {
389+
Input,
390+
FormItem,
391+
},
392+
})
393+
394+
const form = createForm()
395+
396+
export default () => {
397+
const [requiredMark, setRequiredMark] = useState(true)
398+
return (
399+
<ConfigProvider locale={zhCN}>
400+
<p>
401+
Required Mark：
402+
<Radio.Group
403+
value={requiredMark}
404+
onChange={(e) => setRequiredMark(e.target.value)}
405+
>
406+
<Radio.Button value="optional">optional</Radio.Button>
407+
<Radio.Button value={true}>true</Radio.Button>
408+
<Radio.Button value={false}>false</Radio.Button>
409+
</Radio.Group>
410+
</p>
411+
<FormProvider form={form}>
412+
<FormLayout requiredMark={requiredMark}>
413+
<SchemaField>
414+
<SchemaField.String
415+
title="我是必填项"
416+
required
417+
x-decorator="FormItem"
418+
x-component="Input"
419+
/>
420+
<SchemaField.String
421+
title="我是选填项"
422+
x-decorator="FormItem"
423+
x-component="Input"
424+
/>
425+
</SchemaField>
426+
</FormLayout>
427+
</FormProvider>
428+
</ConfigProvider>
429+
)
430+
}
431+
```
432+
377433
## 无边框案例
378434

379435
设置去除组件边框
@@ -721,6 +777,17 @@ export default () => {
721777
}}
722778
/>
723779

780+
<SchemaField.String
781+
title="禁用错误状态边框样式(feedbackStatus=error)"
782+
x-decorator="FormItem"
783+
x-component="Input"
784+
description="description"
785+
x-decorator-props={{
786+
enableOutlineFeedback: false,
787+
feedbackStatus: 'error',
788+
}}
789+
/>
790+
724791
<SchemaField.Void
725792
x-component="Title"
726793
x-component-props={{ text: '反馈信息的布局' }}
@@ -1058,39 +1125,40 @@ export default () => {
10581125

10591126
### FormItem
10601127

1061-
| 属性名 | 类型 | 描述 | 默认值 |
1062-
| ----------------- | ------------------------------------------------------ | ------------------------------------------------------------------- | ------------------- |
1063-
| label | ReactNode | 标签 | - |
1064-
| style | CSSProperties | 样式 | - |
1065-
| labelStyle | CSSProperties | 标签样式 | - |
1066-
| wrapperStyle | CSSProperties | 组件容器样式 | - |
1067-
| className | string | 组件样式类名 | - |
1068-
| colon | boolean | 冒号 | true |
1069-
| tooltip | ReactNode | 问号提示 | - |
1070-
| tooltipLayout | `"icon" \| "text"` | 问号提示布局 | `"icon"` |
1071-
| tooltipIcon | ReactNode | 问号提示图标 | `?` |
1072-
| labelAlign | `"left"` \| `"right"` | 标签文本对齐方式 | `"right"` |
1073-
| labelWrap | boolean | 标签换⾏，否则出现省略号，hover 有 tooltip | false |
1074-
| labelWidth | `number \| string` | 标签固定宽度 | - |
1075-
| wrapperWidth | `number \| string` | 内容固定宽度 | - |
1076-
| labelCol | number | 标签⽹格所占列数，和内容列数加起来总和为 24 | - |
1077-
| wrapperCol | number | 内容⽹格所占列数，和标签列数加起来总和为 24 | - |
1078-
| wrapperAlign | `"left"` \| `"right"` | 内容文本对齐方式⻬ | `"left"` |
1079-
| wrapperWrap | boolean | 内容换⾏，否则出现省略号，hover 有 tooltip | false |
1080-
| fullness | boolean | 内容撑满 | false |
1081-
| addonBefore | ReactNode | 前缀内容 | - |
1082-
| addonAfter | ReactNode | 后缀内容 | - |
1083-
| size | `"small"` \| `"default"` \| `"large"` | 尺⼨ | - |
1084-
| inset | boolean | 是否是内嵌布局 | false |
1085-
| extra | ReactNode | 扩展描述⽂案 | - |
1086-
| feedbackText | ReactNode | 反馈⽂案 | - |
1087-
| feedbackLayout | `"loose"` \| `"terse"` \| `"popover" \| "none"` | 反馈布局 | - |
1088-
| feedbackStatus | `"error"` \| `"warning"` \| `"success"` \| `"pending"` | 反馈布局 | - |
1089-
| feedbackIcon | ReactNode | 反馈图标 | - |
1090-
| getPopupContainer | function(triggerNode) | 当 feedbackLayout 为 popover 时，浮层渲染父节点，默认渲染到 body 上 | () => document.body |
1091-
| asterisk | boolean | 星号提醒 | - |
1092-
| gridSpan | number | ⽹格布局占宽 | - |
1093-
| bordered | boolean | 是否有边框 | - |
1128+
| 属性名 | 类型 | 描述 | 默认值 |
1129+
| --------------------- | ------------------------------------------------------ | ------------------------------------------------------------------- | ------------------- |
1130+
| label | ReactNode | 标签 | - |
1131+
| style | CSSProperties | 样式 | - |
1132+
| labelStyle | CSSProperties | 标签样式 | - |
1133+
| wrapperStyle | CSSProperties | 组件容器样式 | - |
1134+
| className | string | 组件样式类名 | - |
1135+
| colon | boolean | 冒号 | true |
1136+
| tooltip | ReactNode | 问号提示 | - |
1137+
| tooltipLayout | `"icon" \| "text"` | 问号提示布局 | `"icon"` |
1138+
| tooltipIcon | ReactNode | 问号提示图标 | `?` |
1139+
| labelAlign | `"left"` \| `"right"` | 标签文本对齐方式 | `"right"` |
1140+
| labelWrap | boolean | 标签换⾏，否则出现省略号，hover 有 tooltip | false |
1141+
| labelWidth | `number \| string` | 标签固定宽度 | - |
1142+
| wrapperWidth | `number \| string` | 内容固定宽度 | - |
1143+
| labelCol | number | 标签⽹格所占列数，和内容列数加起来总和为 24 | - |
1144+
| wrapperCol | number | 内容⽹格所占列数，和标签列数加起来总和为 24 | - |
1145+
| wrapperAlign | `"left"` \| `"right"` | 内容文本对齐方式⻬ | `"left"` |
1146+
| wrapperWrap | boolean | 内容换⾏，否则出现省略号，hover 有 tooltip | false |
1147+
| fullness | boolean | 内容撑满 | false |
1148+
| addonBefore | ReactNode | 前缀内容 | - |
1149+
| addonAfter | ReactNode | 后缀内容 | - |
1150+
| size | `"small"` \| `"default"` \| `"large"` | 尺⼨ | - |
1151+
| inset | boolean | 是否是内嵌布局 | false |
1152+
| extra | ReactNode | 扩展描述⽂案 | - |
1153+
| feedbackText | ReactNode | 反馈⽂案 | - |
1154+
| feedbackLayout | `"loose"` \| `"terse"` \| `"popover" \| "none"` | 反馈布局 | - |
1155+
| feedbackStatus | `"error"` \| `"warning"` \| `"success"` \| `"pending"` | 反馈布局 | - |
1156+
| feedbackIcon | ReactNode | 反馈图标 | - |
1157+
| enableOutlineFeedback | boolean | 开启异常状态的边框颜色样式，当自定义组件内存在子表单时建议关闭此项 | true |
1158+
| getPopupContainer | function(triggerNode) | 当 feedbackLayout 为 popover 时，浮层渲染父节点，默认渲染到 body 上 | () => document.body |
1159+
| asterisk | boolean | 星号提醒 | - |
1160+
| gridSpan | number | ⽹格布局占宽 | - |
1161+
| bordered | boolean | 是否有边框 | - |
10941162

10951163
### FormItem.BaseItem
10961164

0 commit comments

Comments
 (0)