代码演示
如何引入
基本使用
类型搭配
开发者可以基于场景使用
okType
/cancelType
/icon
等参数搭配出不同风格的气泡式确认框。搭配 Tooltip 或 Popover 使用
请参考搭配使用
API 参考
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
arrowPointAtCenter | “小三角”是否指向元素中心,需要同时传入"showArrow=true" | boolean | false | 0.34.0 |
cancelText | 取消按钮文字 | string | "取消" | |
cancelButtonProps | 取消按钮的 props | object | 0.29.0 | |
cancelType | 取消按钮类型 | string | "tertiary" | |
content | 显示的内容 | string|ReactNode | ||
defaultVisible | 气泡框默认是否展示 | boolean | 0.19.0 | |
disabled | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean | false | |
getPopupContainer | 指定父级 DOM,弹层将会渲染至该 DOM 中,自定义时容器需要设置 position: relative | Function():HTMLElement | () => document.body | |
icon | 自定义弹出气泡 Icon 图标 | ReactNode | ||
motion | 下拉列表出现/隐藏时,是否有动画 | boolean|object | true | |
okText | 确认按钮文字 | string | "确认" | |
okType | 确认按钮类型 | string | "primary" | |
okButtonProps | 确认按钮的 props | object | 0.29.0 | |
position | 方向,可选值:top ,topLeft ,topRight ,left ,leftTop ,leftBottom ,right ,rightTop ,rightBottom ,bottom ,bottomLeft ,bottomRight | string | "bottomLeft" | |
showArrow | 是否显示箭头三角形 | boolean | false | |
stopPropagation | 是否阻止弹层上的点击事件冒泡 | boolean | true | 0.34.0 |
title | 显示的标题 | string|ReactNode | ||
trigger | 触发展示的时机,可选值:hover / focus / click / custom | string | 'click' | |
visible | 气泡框是否展示的受控属性 | boolean | 0.19.0 | |
zIndex | 浮层 z-index 值 | number | 1030 | |
onConfirm | 点击确认按钮回调 | Function(e) | ||
onCancel | 点击取消按钮回调 | Function(e) | ||
onClickOutSide | 当弹出层处于展示状态,点击非Children、非浮层内部区域时的回调 | Function(e) | 2.1.0 | |
onVisibleChange | 气泡框切换显示隐藏的回调 | Function(visible: boolean): void | () => {} | 0.19.0 |