mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
docs(form): fulfill docs (#568)
* docs: add form docs * docs: update form docs * docs: update form docs * docs: update form docs Co-authored-by: yugang.cao <yugang.cao@tusimple.ai>
This commit is contained in:
Yugang Cao
GitHub
parent
54a09ec0e5
commit
e5e2d3929e
@ -22,25 +22,25 @@ async
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| inline | `boolean` | `false` | |
|
||||
| inline | `boolean` | `false` | Whether to display as an inline form. |
|
||||
| label-width | `number \| string` | `undefined` | The width of label. Can be useful when `label-placement` is `'left'`. |
|
||||
| label-align | `'left' \| 'right'` | `-` | Text align in label. |
|
||||
| label-placement | `'left' \| 'top'` | `'top'` | |
|
||||
| label-placement | `'left' \| 'top'` | `'top'` | Label placement. |
|
||||
| model | `Object` | `{}` | The object to get collected value from form items. |
|
||||
| rules | `type FormRules = { [itemValidatePath: string]: FormItemRule \| Array<FormItemRule> \| FormRules }` | `{}` | The rules to validate form items. |
|
||||
| show-feedback | `boolean` | `true` | |
|
||||
| show-feedback | `boolean` | `true` | Whether to show feedback. |
|
||||
| show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | Whether to show require mark when form item is required. |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size. |
|
||||
|
||||
#### FormItemRule Type
|
||||
|
||||
| Property | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| required | `boolean` | |
|
||||
| validator | `(rule: FormItemRule, value: any) => boolean \| Error` | |
|
||||
| asyncValidator | `(rule: FormItemRule, value: any, callback: boolean => void) => void` | |
|
||||
| trigger | `string \| Array<string>` | |
|
||||
| message | `string` | |
|
||||
| required | `boolean` | Is it required. |
|
||||
| validator | `(rule: FormItemRule, value: any) => boolean \| Error` | Validate rule. |
|
||||
| asyncValidator | `(rule: FormItemRule, value: any, callback: boolean => void) => void` | Asynchronous validate, support the definition of callback. |
|
||||
| trigger | `string \| Array<string>` | Trigger type. |
|
||||
| message | `string` | Information show when validate fails. |
|
||||
|
||||
### Form Item Props
|
||||
|
||||
@ -49,18 +49,18 @@ async
|
||||
| feedback | `string` | `undefined` | The feedback message of the form item. If not set to `undefined`, it will take place of the result of rule-based validation. |
|
||||
| first | `boolean` | `false` | Whether only to show the first validation error message. |
|
||||
| ingore-path-change | `boolean` | `false` | Usually, the change of `path` will cause the data source's variation. So naive-ui will clear the validation result. If it is not expected, you can set it to `true` |
|
||||
| label | `string` | `undefined` | |
|
||||
| label | `string` | `undefined` | Lbale information. |
|
||||
| label-align | `'left' \| 'right'` | `undefined` | Text align in label. If not set, use `label-align` from wrapper form. |
|
||||
| label-placement | `'left' \| 'top'` | `undefined` | If not set, use `label-placement` from wrapper form. |
|
||||
| label-style | `Object` | `{}` | |
|
||||
| label-style | `Object` | `{}` | Label style. |
|
||||
| label-width | `number \| string` | `undefined` | If not set, use `label-width` from the wrapper form. |
|
||||
| path | `string` | `undefined` | The path to collect item value to wrapper form's model object. |
|
||||
| required | `boolean` | `false` | Whether to show required mark. Note: a required rule has higher priority than this prop & this prop **won't** have any effect on validation. The validation still depends on the rules. |
|
||||
| rule | `FormItemRule \| Array<FormItemRule>` | `undefined` | The rule to validate the form item. It will be merged with the rules acquired by `rule-path` from wrapper form's rules. It's recommend to set all rules on wrapper form. |
|
||||
| rule-path | `string` | `undefined` | The path to get rule from wrapper form's rule object. If not set, use path of the form item instead. |
|
||||
| show-feedback | `boolean` | `true` | |
|
||||
| show-feedback | `boolean` | `true` | Whether to show feedback. |
|
||||
| show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | Whether to show require mark. If not set, use `show-require-mark` from wrapper form. |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size. |
|
||||
| validation-status | `'error' \| 'success' \| 'warning'` | `undefined` | The validation status of the form item. If not set to `undefined`, it will take place of the result of rule-based validation. |
|
||||
|
||||
### FormItemGi Props
|
||||
@ -78,14 +78,14 @@ Accept all props from FormItem & [GridItem](grid#GridItem-Props)
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| validate | `(validateCallback?: (errors?: Array<ValidationError>) => void, shouldRuleBeApplied?: FormItemRule => boolean) => Promise<void>` | Validate the form. The rejection value type of returned promise is `Array<ValidationError>`. |
|
||||
| restoreValidation | `() => void` | |
|
||||
| restoreValidation | `() => void` | Restore validate. |
|
||||
|
||||
### FormItem, FormItemGi Methods
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| validate | `(options: { trigger?: string, callback?: (errors?: Array<ValidationError>) => void, shouldRuleBeApplied?: FormItemRule => boolean, options?: AsyncValidatorOptions }) => Promise<void>` | Validate the form item. The rejection value type of returned promise is `Array<ValidationError>`. If trigger is not set, all rules of the item will be applied. `shouldRuleBeApplied` can filter rules after they are filtered by the trigger. |
|
||||
| restoreValidation | `() => void` | |
|
||||
| restoreValidation | `() => void` | Restore validate. |
|
||||
|
||||
About AsyncValidatorOptions, see <n-a href="https://github.com/yiminghe/async-validator">async-validator</n-a>.
|
||||
|
||||
@ -95,10 +95,10 @@ About AsyncValidatorOptions, see <n-a href="https://github.com/yiminghe/async-va
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| default | `()` | Content |
|
||||
|
||||
### FormItem, FormItemGi Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ----- | ---------- | ----------- |
|
||||
| label | `()` | |
|
||||
| ----- | ---------- | ------------- |
|
||||
| label | `()` | Label content |
|
||||
|
||||
@ -24,25 +24,25 @@ validator-debug
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| inline | `boolean` | `false` | |
|
||||
| inline | `boolean` | `false` | 是否展示为行内表单 |
|
||||
| label-width | `number \| string` | `undefined` | 标签的宽度，在 `label-placement` 是 `'left'` 的时候可能会有用 |
|
||||
| label-align | `'left' \| 'right'` | `-` | 标签的文本对齐方式 |
|
||||
| label-placement | `'left' \| 'top'` | `'top'` | |
|
||||
| label-placement | `'left' \| 'top'` | `'top'` | 标签显示的位置 |
|
||||
| model | `Object` | `{}` | 获取表项中收集到的值的对象 |
|
||||
| rules | `type FormRules = { [itemValidatePath: string]: FormItemRule \| Array<FormItemRule> \| FormRules }` | `{}` | 验证表项的规则 |
|
||||
| show-feedback | `boolean` | `true` | |
|
||||
| show-feedback | `boolean` | `true` | 是否展示校验反馈 |
|
||||
| show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | 是否展示必填的星号 |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
|
||||
|
||||
#### FormItemRule Type
|
||||
|
||||
| 属性 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| required | `boolean` | |
|
||||
| validator | `(rule: FormItemRule, value: any) => boolean \| Error` | |
|
||||
| asyncValidator | `(rule: FormItemRule, value: any, callback: boolean => void) => void` | |
|
||||
| trigger | `string \| Array<string>` | |
|
||||
| message | `string` | |
|
||||
| required | `boolean` | 是否必填 |
|
||||
| validator | `(rule: FormItemRule, value: any) => boolean \| Error` | 校验规则 |
|
||||
| asyncValidator | `(rule: FormItemRule, value: any, callback: boolean => void) => void` | 异步校验，支持定义回调函数 |
|
||||
| trigger | `string \| Array<string>` | 触发方式 |
|
||||
| message | `string` | 校验失败时展示的信息 |
|
||||
|
||||
### FormItem Props
|
||||
|
||||
@ -51,17 +51,17 @@ validator-debug
|
||||
| feedback | `string` | `undefined` | 表项的反馈信息。不设为 `undefined` 时，会覆盖规则验证的结果 |
|
||||
| first | `boolean` | `false` | 是否只展示首个出错信息 |
|
||||
| ingore-path-change | `boolean` | `false` | 通常 `path` 的改变会导致数据来源的变化，所以 naive-ui 会清空验证信息。如果不期望这个行为，可以将其置为 `true` |
|
||||
| label | `string` | `undefined` | |
|
||||
| label | `string` | `undefined` | 标签信息 |
|
||||
| label-align | `'left' \| 'right'` | `undefined` | 标签的文本对齐方式。如果没有被设定，使用外层表单的 `label-align` |
|
||||
| label-placement | `'left' \| 'top'` | `undefined` | 如果没有被设定，使用外层表单的 `label-placement` |
|
||||
| label-style | `Object` | `{}` | |
|
||||
| label-style | `Object` | `{}` | 标签的样式 |
|
||||
| label-width | `number \| string` | `undefined` | 如果没有被设定，使用外层表单的 `label-width` |
|
||||
| path | `string` | `undefined` | 将值收集到外层表单 `model` 对象的路径 |
|
||||
| rule | `FormItemRule \| Array<FormItemRule>` | `undefined` | 验证表项的规则，它会被通过 `rule-path` 从外层表单获取的规则合并来作为表项的验证规则。推荐还是在外层表单设置所有规则 |
|
||||
| rule-path | `string` | `undefined` | 从外层表单的 `rules` 对象获取规则的路径。如果没有设定，使用表项的 `path` 代替 |
|
||||
| show-feedback | `boolean` | `true` | |
|
||||
| show-feedback | `boolean` | `true` | 是否展示校验反馈 |
|
||||
| show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | 是否展示必填的星号。如果没有被设定，使用外层 `n-form` 的 `show-require-mark` |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
|
||||
| validation-status | `'error' \| 'success' \| 'warning'` | `undefined` | 表单的验证状态。不设为 `undefined`时，会覆盖规则验证的结果 |
|
||||
|
||||
### FormItemGi Props
|
||||
@ -78,15 +78,15 @@ validator-debug
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| validate | `(validateCallback?: (errors?: Array<ValidationError>) => void, shouldRuleBeApplied?: FormItemRule => boolean) => Promise<void>` | 验证表单。Promise rejection 的返回值类型是 `Array<ValidationError>`。 |
|
||||
| restoreValidation | `() => void` | |
|
||||
| validate | `(validateCallback?: (errors?: Array<ValidationError>) => void, shouldRuleBeApplied?: FormItemRule => boolean) => Promise<void>` | 验证表单，Promise rejection 的返回值类型是 `Array<ValidationError>` |
|
||||
| restoreValidation | `() => void` | 还原到未校验的状态 |
|
||||
|
||||
### FormItem, FormItemGi Methods
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| validate | `(options: { trigger?: string, callback?: (errors?: Array<ValidationError>) => void, shouldRuleBeApplied?: FormItemRule => boolean, options?: AsyncValidatorOptions }) => Promise<void>` | 验证表项，Promise rejection 的返回值类型是 `Array<ValidationError>`。如果设定 `trigger`，这一个表项全部的规则都会被使用。`shouldRuleBeApplied` 可以用来进一步过滤已经经过 `trigger` 筛选的规则 |
|
||||
| restoreValidation | `() => void` | |
|
||||
| restoreValidation | `() => void` | 还原到未校验的状态 |
|
||||
|
||||
关于 AsyncValidatorOptions，参考 <n-a href="https://github.com/yiminghe/async-validator">async-validator</n-a>。
|
||||
|
||||
@ -96,10 +96,10 @@ validator-debug
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| default | `()` | 内容 |
|
||||
|
||||
### FormItem, FormItemGi Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ----- | ---- | ---- |
|
||||
| label | `()` | |
|
||||
| ----- | ---- | -------- |
|
||||
| label | `()` | 标签内容 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user