uxcore-popover
TL;DR
uxcore-popover ui component for react
setup develop environment
$ git clone https://github.com/uxcore/uxcore-popover$ cd uxcore-popover$ npm install$ gulp server
Usage
let overlay = <div> <div className="demoContent"> <i className="kuma-icon kuma-icon-information"></i> <span>你确认要删除此项数据吗?</span> </div> <div className="demoButton"> <Button size="medium">确定</Button> <Button size="medium" color="orange">取消</Button> </div> </div>;return <div> <h2>Demo 1 悬浮弹出</h2> <div style=marginLeft: 60> <Popover placement="topLeft" title='上左' overlay=overlay onOk=thistest> <Button>上左</Button> </Popover> <Popover placement="top" title='上边' overlay=overlay> <Button>上边</Button> </Popover> <Popover placement="topRight" title='上右' overlay=overlay> <Button>上右</Button> </Popover> </div> <div style=width: 60 float: 'left'> <Popover placement="leftTop" title='左上' overlay=overlay> <Button>左上</Button> </Popover> <Popover placement="left" title='左边' overlay=overlay> <Button>左边</Button> </Popover> <Popover placement="leftBottom" title='左下' overlay=overlay> <Button>左下</Button> </Popover> </div> <div style=width: 60 marginLeft: 270> <Popover placement="rightTop" title='右上' overlay=overlay> <Button>右上</Button> </Popover> <Popover placement="right" title='右边' overlay=overlay> <Button>右边</Button> </Popover> <Popover placement="rightBottom" title='右下' overlay=overlay> <Button>右下</Button> </Popover> </div> <div style=marginLeft: 60 clear: 'both'> <Popover placement="bottomLeft" title='下左' overlay=overlay> <Button>下左</Button> </Popover> <Popover placement="bottom" title='下边' overlay=overlay> <Button>下边</Button> </Popover> <Popover placement="bottomRight" title='下右' overlay=overlay> <Button>下右</Button> </Popover> </div> <h2>Demo 2 点击弹出</h2> <Popover title="测试" overlay=overlay placement="right" trigger="click"> <Button>从右弹出</Button> </Popover> <h2>Demo 3 没有标题</h2> <Popover overlay=overlay placement="right"> <Button>从右弹出</Button> </Popover> <h2>Demo 4 监听弹窗展开/收起状态</h2> <Popover overlay=overlay placement="bottom" onVisibleChange=meonVisibleChange> <Button>从下弹出</Button> </Popover> <h2>Demo 5 手动控制显示状态</h2> <Popover overlay=overlay placement="bottom" visible=mestatevisible> <Button onMouseOver=meonChange onMouseLeave=meonChange>手动控制</Button> </Popover> </div>
demo
http://uxcore.github.io/uxcore/components/uxcore-popover/
API
Props
配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
---|---|---|---|---|
overlay | string | required | - | 弹窗内容 |
overlayClassName | string | optional | - | 弹窗的额外类名 |
visible | boolean | optional | - | 是否展开弹窗内容,如果不填则自动处理;填写则需要手动处理 |
title | string | optional | - | 弹窗标题,不传入则没有标题栏 |
placement | string | optional | top | 弹窗从那个方向弹出 |
prefixCls | string | optional | kuma-popup | 类名前缀,用于定制化 |
trigger | string | optional | hover | 触发弹窗的方式,有 hover 和 click 两种 |
delay | number | optional | 0 | hover延迟显示时间,单位ms |
showButton | boolean | optional | false | 是否显示内置按钮 |
onOk | function(hideCallback) | optional | noop | 内置的确定按钮的回调,当想要关闭 popover 时需调用 hideCallback |
onCancel | function | optional | noop | 内置的取消按钮的回调 |
okText | string | optional | "确定" | 内置的确定按钮显示的文案 |
cancelText | string | optional | "取消" | 内置的取消按钮显示的文案 |
onVisibleChange | function(isDisplay) | optional | noop | 显示状态发生改变的回调,isDisplay表示弹窗是否展开 |
getTooltipContainer | function | optional | - | 返回一个 dom 节点,作为 tooltip 渲染的容器 |