diff --git a/src/drawer/Drawer.tsx b/src/drawer/Drawer.tsx index b71a9fe32f..64d69e4dc6 100644 --- a/src/drawer/Drawer.tsx +++ b/src/drawer/Drawer.tsx @@ -53,6 +53,8 @@ const Drawer = forwardRef((originalProps, ref) => { zIndex, destroyOnClose, sizeDraggable, + cancelBtnProps, + confirmBtnProps, } = props; // 国际化文本初始化 @@ -121,13 +123,13 @@ const Drawer = forwardRef((originalProps, ref) => { if (footer !== true) return footer; const defaultCancelBtn = ( - ); const defaultConfirmBtn = ( - ); diff --git a/src/drawer/_example/customized-button-props.jsx b/src/drawer/_example/customized-button-props.jsx new file mode 100644 index 0000000000..3a2d1ccd7e --- /dev/null +++ b/src/drawer/_example/customized-button-props.jsx @@ -0,0 +1,30 @@ +import React, { useState } from 'react'; +import { Drawer, Button } from 'tdesign-react'; + +export default function () { + const [visible, setVisible] = useState(false); + + const handleClick = () => { + setVisible(true); + }; + const handleClose = () => { + setVisible(false); + }; + return ( + <> + + +

抽屉的内容

+
+ + ); +} diff --git a/src/drawer/drawer.md b/src/drawer/drawer.md index 9cd967c1ab..23b81edfaf 100644 --- a/src/drawer/drawer.md +++ b/src/drawer/drawer.md @@ -9,12 +9,14 @@ className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N attach | String / Function | - | 抽屉挂载的节点,默认挂在组件本身的位置。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N body | TNode | - | 抽屉内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -cancelBtn | TNode | - | 取消按钮,可自定义。值为 null 则不显示取消按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制取消事件。TS 类型:`FooterButton` | N +cancelBtn | TNode | - | 取消按钮,可自定义。值为 null 则不显示取消按钮。值类型为字符串,则表示自定义按钮文本。使用 TNode 自定义按钮时,需自行控制取消事件。TS 类型:`FooterButton` | N +cancelBtnProps | ButtonProps | - | [Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts) | N children | TNode | - | 抽屉内容,同 body。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N closeBtn | TNode | - | 关闭按钮,可以自定义。值为 true 显示默认关闭按钮,值为 false 不显示关闭按钮。值类型为 string 则直接显示值,如:“关闭”。值类型为 TNode,则表示呈现自定义按钮示例。TS 类型:`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发抽屉关闭事件 | N closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N -confirmBtn | TNode | - | 确认按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制确认事件。TS 类型:`FooterButton` `type FooterButton = string \| ButtonProps \| TNode`,[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts) | N +confirmBtn | TNode | - | 确认按钮。值类型为字符串。使用 TNode 自定义按钮时,需自行控制确认事件。TS 类型:`FooterButton` `type FooterButton = string \| TNode`,[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts) | N +confirmBtnProps | ButtonProps | - | [Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/drawer/type.ts) | N destroyOnClose | Boolean | false | 抽屉关闭时是否销毁节点 | N footer | TNode | true | 底部操作栏,默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮,值为 false 或 null 不显示任何内容,值类型为 TNode 表示自定义底部内容。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N header | TNode | true | 头部内容。值为 true 显示空白头部,值为 false 不显示头部,值类型为 string 则直接显示值,值类型为 TNode 表示自定义头部内容。TS 类型:`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N diff --git a/src/drawer/type.ts b/src/drawer/type.ts index 13e4690b72..e71e1d7197 100644 --- a/src/drawer/type.ts +++ b/src/drawer/type.ts @@ -21,6 +21,10 @@ export interface TdDrawerProps { * 取消按钮,可自定义。值为 null 则不显示取消按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制取消事件 */ cancelBtn?: FooterButton; + /** + * 取消按钮属性,值类型为 Object 则表示透传 Button 组件属性 + */ + cancelBtnProps?: ButtonProps; /** * 抽屉内容,同 body */ @@ -41,6 +45,10 @@ export interface TdDrawerProps { * 确认按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制确认事件 */ confirmBtn?: FooterButton; + /** + * 取消按钮属性,值类型为 Object 则表示透传 Button 组件属性 + */ + confirmBtnProps?: ButtonProps; /** * 抽屉关闭时是否销毁节点 * @default false @@ -161,7 +169,7 @@ export interface DrawerInstance { update?: (props: DrawerOptions) => void; } -export type FooterButton = string | ButtonProps | TNode; +export type FooterButton = string | TNode; export type DrawerEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay';