bee-popconfirm
Browser Support
IE 9+ |
Chrome 31.0+ |
Firefox 31.0+ |
Opera 30.0+ |
Safari 7.0+ |
react bee-popconfirm component for tinper-bee
some description...
使用方法
const content = '您喜欢使用tinper-bee组件库吗?';
class Demo extends Component {
render () {
return (
<Popconfirm trigger="click" placement="left" content={content}>
<Button colors="primary">向左!</Button>
</Popconfirm>
)
}
}
样式引入
- 可以使用link引入build目录下Popconfirm.css
<link rel="stylesheet" href="./node_modules/bee-popconfirm/build/Popconfirm.css">
- 可以在js中import样式
import "./node_modules/bee-popconfirm/src/Popconfirm.scss"
//或是
import "./node_modules/bee-popconfirm/build/Popconfirm.css"
API
Popconfirm
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
defaultOverlayShown | 默认是否显示 | bool | false |
content | 显示的组件 | node/string | - |
onClick | 点击事件的钩子函数 | function | - |
onClose | 确认按钮的点击事件 | function | - |
onCancel | 取消按钮的点击事件 | function | - |
rootClose | 是否点击除弹出层任意地方隐藏 | boolean | false |
onRootClose | 点击除弹出层任意地方隐藏的回调 | func | - |
transition | 过度动画组件 | component | - |
onEnter | 开始显示时的钩子函数 | function | - |
onEntering | 显示时的钩子函数 | function | - |
onEntered | 显示完成后的钩子函数 | function | - |
onExit | 隐藏开始时的钩子函数 | function | - |
onExiting | 隐藏进行时的钩子函数 | function | - |
onExited | 隐藏结束时的钩子函数 | function | - |
placement | 弹出位置 | top/left/right/bottom | right |
secondPlacement | 当placement放不下时的弹出位置 | top/left/right/bottom | right |
locale | 显示文字语言对象 | object | {lang: 'zh-cn', ok: '确认', cancel: '取消'} |
container | 标题 | node/function | body |
stopbubble | 是否阻止冒泡(1-阻止,0-不阻止) | number | 0 |
animation | 是否要使用动画 | bool | true |
show | 显示隐藏是否受控 | bool | - |
cancel_btn | 自定义的取消按钮 | node/function | - |
close_btn | 自定义的确定按钮 | node/function | - |
noNegativeTop | 外层定位的top值是否不允许为负值 | bool | - |
开发调试
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-popconfirm
$ cd bee-popconfirm
$ npm install
$ npm run dev