tinper-beebee-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 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"
API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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