diff --git a/src/button/button.en-US.md b/src/button/button.en-US.md index 635a25dadd..1e1bf0193a 100644 --- a/src/button/button.en-US.md +++ b/src/button/button.en-US.md @@ -11,6 +11,7 @@ block | Boolean | false | make button to be a block-level element | N children | TNode | - | button's children elements。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N content | TNode | - | button's children elements。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N disabled | Boolean | false | disable the button, make it can not be clicked | N +form | String | undefined | native `form` attribute,which supports triggering events for a form with a specified id through the use of the form attribute. | N ghost | Boolean | false | make background-color to be transparent | N href | String | - | \- | N icon | TElement | - | use it to set left icon in button。Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N diff --git a/src/button/button.md b/src/button/button.md index a98af8032d..80666d407b 100644 --- a/src/button/button.md +++ b/src/button/button.md @@ -11,6 +11,7 @@ block | Boolean | false | 是否为块级元素 | N children | TNode | - | 按钮内容,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N content | TNode | - | 按钮内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N disabled | Boolean | false | 禁用状态 | N +form | String | undefined | 原生的form属性,支持用于通过 form 属性触发对应 id 的 form 的表单事件 | N ghost | Boolean | false | 是否为幽灵按钮(镂空按钮) | N href | String | - | 跳转地址。href 存在时,按钮标签默认使用 `` 渲染;如果指定了 `tag` 则使用指定的标签渲染 | N icon | TElement | - | 按钮内部图标,可完全自定义。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N diff --git a/src/button/defaultProps.ts b/src/button/defaultProps.ts index 0bd5fd2f7b..a74dc4cfb6 100644 --- a/src/button/defaultProps.ts +++ b/src/button/defaultProps.ts @@ -7,6 +7,7 @@ import { TdButtonProps } from './type'; export const buttonDefaultProps: TdButtonProps = { block: false, disabled: false, + form: undefined, ghost: false, loading: false, shape: 'rectangle', diff --git a/src/button/type.ts b/src/button/type.ts index b5c0de67b4..8395c28120 100644 --- a/src/button/type.ts +++ b/src/button/type.ts @@ -26,6 +26,10 @@ export interface TdButtonProps { * @default false */ disabled?: boolean; + /** + * 原生的form属性,支持用于通过 form 属性触发对应 id 的 form 的表单事件 + */ + form?: string; /** * 是否为幽灵按钮(镂空按钮) * @default false diff --git a/src/form/Form.tsx b/src/form/Form.tsx index b9cbcfc653..054513b7b6 100644 --- a/src/form/Form.tsx +++ b/src/form/Form.tsx @@ -40,6 +40,7 @@ const Form = forwardRefWithStatics( preventSubmitDefault, disabled, children, + id, onReset, onValuesChange = noop, } = props; @@ -107,6 +108,7 @@ const Form = forwardRefWithStatics( >
` | N +id | String | undefined | native id attribute of the form,which supports being used in conjunction with non-form buttons through the form attribute to trigger form events | N initialData | Object | - | \- | N labelAlign | String | right | options: left/right/top | N labelWidth | String / Number | '100px' | \- | N diff --git a/src/form/form.md b/src/form/form.md index 0f84ad3f34..245d49d880 100644 --- a/src/form/form.md +++ b/src/form/form.md @@ -103,6 +103,7 @@ disabled | Boolean | undefined | 是否禁用整个表单 | N errorMessage | Object | - | 表单错误信息配置,示例:`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型:`FormErrorMessage` | N form | Object | - | 经 `Form.useForm()` 创建的 form 控制实例。TS 类型:`FormInstanceFunctions` | N formControlledComponents | Array | - | 允许表单统一控制禁用状态的自定义组件名称列表。默认会有组件库的全部输入类组件:TInput、TInputNumber、TCascader、TSelect、TOption、TSwitch、TCheckbox、TCheckboxGroup、TRadio、TRadioGroup、TTreeSelect、TDatePicker、TTimePicker、TUpload、TTransfer、TSlider。对于自定义组件,组件内部需要包含可以控制表单禁用状态的变量 `formDisabled`。示例:`['CustomUpload', 'CustomInput']`。TS 类型:`Array` | N +id | String | undefined | 表单原生的id属性,支持用于配合非表单内的按钮通过form属性来触发表单事件 | N initialData | Object | - | 表单初始数据,重置时所需初始数据,优先级小于 FormItem 设置的 initialData | N labelAlign | String | right | 表单字段标签对齐方式:左对齐、右对齐、顶部对齐。可选项:left/right/top | N labelWidth | String / Number | '100px' | 可以整体设置label标签宽度,默认为100px | N diff --git a/src/form/type.ts b/src/form/type.ts index 9b85100660..909bfb6cc3 100644 --- a/src/form/type.ts +++ b/src/form/type.ts @@ -30,6 +30,10 @@ export interface TdFormProps { * 允许表单统一控制禁用状态的自定义组件名称列表。默认会有组件库的全部输入类组件:TInput、TInputNumber、TCascader、TSelect、TOption、TSwitch、TCheckbox、TCheckboxGroup、TRadio、TRadioGroup、TTreeSelect、TDatePicker、TTimePicker、TUpload、TTransfer、TSlider。对于自定义组件,组件内部需要包含可以控制表单禁用状态的变量 `formDisabled`。示例:`['CustomUpload', 'CustomInput']` */ formControlledComponents?: Array; + /** + * 表单原生的id属性,支持用于配合非表单内的按钮通过form属性来触发表单事件 + */ + id?: string; /** * 表单初始数据,重置时所需初始数据,优先级小于 FormItem 设置的 initialData */