uxcore-popover

uxcore-popover component for uxcore.

Usage no npm install needed!

<script type="module">
  import uxcorePopover from 'https://cdn.skypack.dev/uxcore-popover';
</script>

README

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