IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
react bee-popconfirm component for tinper-bee
some description...
const popoverLeft = (
<Popconfirm id="popover-positioned-left" title="左侧弹出">
您喜欢使用tinper-bee组件库吗?
</Popconfirm>
);
class Demo extends Component {
render () {
return (
<OverlayTrigger trigger="click" placement="left" overlay={popoverLeft}>
<Button colors="primary">向左!</Button>
</OverlayTrigger>
)
}
}
- 可以使用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"
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
id | 标示弹出层 | string/number | - |
title | 卡片标题 | string/ReactNode | - |
content | 卡片内容 | string/ReactNode | - |
placement | 弹出位置 | 可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom |
right |
positionTop | 弹出框向上偏移量 | string/number | - |
positionLeft | 弹出框向左偏移量 | string/number | - |
container | 容器 | ReactNode/function | body |
trigger | 触发现实和隐藏的事件类型 | click/hover/focus | hover |
show | 控制显示和隐藏 | bool | - |
defaultOverlayShown | 默认显示的状态 | bool | false |
onHide | 隐藏时的回调 | function | - |
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-popconfirm
$ cd bee-popconfirm
$ npm install
$ npm run dev