uxcore-popover

    0.6.3 • Public • Published

    uxcore-popover Dependency Status devDependency Status

    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 渲染的容器

    Install

    npm i uxcore-popover

    DownloadsWeekly Downloads

    43

    Version

    0.6.3

    License

    MIT

    Unpacked Size

    52 kB

    Total Files

    20

    Last publish

    Collaborators

    • eternalsky
    • ex90rts
    • moxiaohe
    • rubyless
    • surfacew
    • taoqili
    • vincent.bian
    • xtongbin