uxcore-popover

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={this.test}>
            <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={me.onVisibleChange.bind(me)}>
             <Button>从下弹出</Button>
        </Popover>
        <h2>Demo 5. 手动控制显示状态</h2>
        <Popover overlay={overlay} placement="bottom" visible={me.state.visible}>
            <Button onMouseOver={me.onChange.bind(me, true)} onMouseLeave={me.onChange.bind(me, false)}>手动控制</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 渲染的容器