Skip to content

Commit

Permalink
feat(antd): FormItem adds more attribute configuration (#3727)
Browse files Browse the repository at this point in the history
  • Loading branch information
Alex authored Feb 27, 2023
1 parent 21cff36 commit 71be0a5
Show file tree
Hide file tree
Showing 7 changed files with 277 additions and 122 deletions.
133 changes: 100 additions & 33 deletions packages/antd/docs/components/FormItem.md
View file

Large diffs are not rendered by default.

134 changes: 101 additions & 33 deletions packages/antd/docs/components/FormItem.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -374,6 +374,62 @@ export default () => {
}
```

## 必填样式

```tsx
import React, { useState } from 'react'
import { Input, FormItem, FormLayout } from '@formily/antd'
import { Radio, ConfigProvider } from 'antd'
import zhCN from 'antd/es/locale/zh_CN'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'

const SchemaField = createSchemaField({
components: {
Input,
FormItem,
},
})

const form = createForm()

export default () => {
const [requiredMark, setRequiredMark] = useState(true)
return (
<ConfigProvider locale={zhCN}>
<p>
Required Mark：
<Radio.Group
value={requiredMark}
onChange={(e) => setRequiredMark(e.target.value)}
>
<Radio.Button value="optional">optional</Radio.Button>
<Radio.Button value={true}>true</Radio.Button>
<Radio.Button value={false}>false</Radio.Button>
</Radio.Group>
</p>
<FormProvider form={form}>
<FormLayout requiredMark={requiredMark}>
<SchemaField>
<SchemaField.String
title="我是必填项"
required
x-decorator="FormItem"
x-component="Input"
/>
<SchemaField.String
title="我是选填项"
x-decorator="FormItem"
x-component="Input"
/>
</SchemaField>
</FormLayout>
</FormProvider>
</ConfigProvider>
)
}
```

## 无边框案例

设置去除组件边框
Expand Down Expand Up @@ -721,6 +777,17 @@ export default () => {
}}
/>

<SchemaField.String
title="禁用错误状态边框样式(feedbackStatus=error)"
x-decorator="FormItem"
x-component="Input"
description="description"
x-decorator-props={{
enableOutlineFeedback: false,
feedbackStatus: 'error',
}}
/>

<SchemaField.Void
x-component="Title"
x-component-props={{ text: '反馈信息的布局' }}
Expand Down Expand Up @@ -1058,39 +1125,40 @@ export default () => {

### FormItem

| 属性名 | 类型 | 描述 | 默认值 |
| ----------------- | ------------------------------------------------------ | ------------------------------------------------------------------- | ------------------- |
| label | ReactNode | 标签 | - |
| style | CSSProperties | 样式 | - |
| labelStyle | CSSProperties | 标签样式 | - |
| wrapperStyle | CSSProperties | 组件容器样式 | - |
| className | string | 组件样式类名 | - |
| colon | boolean | 冒号 | true |
| tooltip | ReactNode | 问号提示 | - |
| tooltipLayout | `"icon" \| "text"` | 问号提示布局 | `"icon"` |
| tooltipIcon | ReactNode | 问号提示图标 | `?` |
| labelAlign | `"left"` \| `"right"` | 标签文本对齐方式 | `"right"` |
| labelWrap | boolean | 标签换⾏，否则出现省略号，hover 有 tooltip | false |
| labelWidth | `number \| string` | 标签固定宽度 | - |
| wrapperWidth | `number \| string` | 内容固定宽度 | - |
| labelCol | number | 标签⽹格所占列数，和内容列数加起来总和为 24 | - |
| wrapperCol | number | 内容⽹格所占列数，和标签列数加起来总和为 24 | - |
| wrapperAlign | `"left"` \| `"right"` | 内容文本对齐方式⻬ | `"left"` |
| wrapperWrap | boolean | 内容换⾏，否则出现省略号，hover 有 tooltip | false |
| fullness | boolean | 内容撑满 | false |
| addonBefore | ReactNode | 前缀内容 | - |
| addonAfter | ReactNode | 后缀内容 | - |
| size | `"small"` \| `"default"` \| `"large"` | 尺⼨ | - |
| inset | boolean | 是否是内嵌布局 | false |
| extra | ReactNode | 扩展描述⽂案 | - |
| feedbackText | ReactNode | 反馈⽂案 | - |
| feedbackLayout | `"loose"` \| `"terse"` \| `"popover" \| "none"` | 反馈布局 | - |
| feedbackStatus | `"error"` \| `"warning"` \| `"success"` \| `"pending"` | 反馈布局 | - |
| feedbackIcon | ReactNode | 反馈图标 | - |
| getPopupContainer | function(triggerNode) | 当 feedbackLayout 为 popover 时，浮层渲染父节点，默认渲染到 body 上 | () => document.body |
| asterisk | boolean | 星号提醒 | - |
| gridSpan | number | ⽹格布局占宽 | - |
| bordered | boolean | 是否有边框 | - |
| 属性名 | 类型 | 描述 | 默认值 |
| --------------------- | ------------------------------------------------------ | ------------------------------------------------------------------- | ------------------- |
| label | ReactNode | 标签 | - |
| style | CSSProperties | 样式 | - |
| labelStyle | CSSProperties | 标签样式 | - |
| wrapperStyle | CSSProperties | 组件容器样式 | - |
| className | string | 组件样式类名 | - |
| colon | boolean | 冒号 | true |
| tooltip | ReactNode | 问号提示 | - |
| tooltipLayout | `"icon" \| "text"` | 问号提示布局 | `"icon"` |
| tooltipIcon | ReactNode | 问号提示图标 | `?` |
| labelAlign | `"left"` \| `"right"` | 标签文本对齐方式 | `"right"` |
| labelWrap | boolean | 标签换⾏，否则出现省略号，hover 有 tooltip | false |
| labelWidth | `number \| string` | 标签固定宽度 | - |
| wrapperWidth | `number \| string` | 内容固定宽度 | - |
| labelCol | number | 标签⽹格所占列数，和内容列数加起来总和为 24 | - |
| wrapperCol | number | 内容⽹格所占列数，和标签列数加起来总和为 24 | - |
| wrapperAlign | `"left"` \| `"right"` | 内容文本对齐方式⻬ | `"left"` |
| wrapperWrap | boolean | 内容换⾏，否则出现省略号，hover 有 tooltip | false |
| fullness | boolean | 内容撑满 | false |
| addonBefore | ReactNode | 前缀内容 | - |
| addonAfter | ReactNode | 后缀内容 | - |
| size | `"small"` \| `"default"` \| `"large"` | 尺⼨ | - |
| inset | boolean | 是否是内嵌布局 | false |
| extra | ReactNode | 扩展描述⽂案 | - |
| feedbackText | ReactNode | 反馈⽂案 | - |
| feedbackLayout | `"loose"` \| `"terse"` \| `"popover" \| "none"` | 反馈布局 | - |
| feedbackStatus | `"error"` \| `"warning"` \| `"success"` \| `"pending"` | 反馈布局 | - |
| feedbackIcon | ReactNode | 反馈图标 | - |
| enableOutlineFeedback | boolean | 开启异常状态的边框颜色样式，当自定义组件内存在子表单时建议关闭此项 | true |
| getPopupContainer | function(triggerNode) | 当 feedbackLayout 为 popover 时，浮层渲染父节点，默认渲染到 body 上 | () => document.body |
| asterisk | boolean | 星号提醒 | - |
| gridSpan | number | ⽹格布局占宽 | - |
| bordered | boolean | 是否有边框 | - |

### FormItem.BaseItem

Expand Down
Loading

0 comments on commit 71be0a5

Please sign in to comment.