冒泡弹出框

有时候，你可能需要绑定一个对话框到某个元素上，她不需要像Modal一样优先，但又有其部分功能。

为了应对这个需求，hana提供了这个组件。

基础

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/2/20
 */
import React, {Component} from 'react';
import {Popover, Button} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Base
 *
 * This component is based on `Tooltip`,
 * but it provides `title`, `subTitle` and `content` properties.
 *
 * @cn
 * 基础
 *
 * 此组件基于`Tooltip`组件，但提供了`title`、`subTitle`和`content`属性来实现基本功能。
 */
export default class ExampleBase extends Component {
  render() {
    return (
      <div>
        <ExampleBlock>
          <Popover
            position={'bottom'}
            title={'The last flower'}
            subTitle={'for everyone in the world'}
            content={(
              <div>
                <img src="/demo/static/images/himawari.png" alt="rich text" />
              </div>
            )}
          >
            <Button>Click me!</Button>
          </Popover>
        </ExampleBlock>
      </div>
    );
  }
}

此组件基于Tooltip组件，但提供了title、subTitle和content属性来实现基本功能。

属性说明

属性名	类型	默认值	说明
view	enum: 'border' 'fill'	'border'	弹出框的显示类型。
title	node		弹出框的标题。
subTitle	node		弹出框的副标题。
content	node	null	弹出框的内容。
position	enum: 'top' 'bottom' 'left' 'right'	'bottom'	默认相对于children显示的位置。
show	bool		用于自行控制弹出框的显示与关闭。
disabled	bool	false	禁用弹出框
onChange	function	() => {}	当弹出框被打开或者关闭时，将会触发这个回调。 (show: boolean) => void
trigger	enum: 'hover' 'focus' 'click'	'click'	触发打开弹出框这个行为的方式。
color	string		弹出框的主题颜色。
style	object	{}	弹出框的样式。
containerStyle	object	{}	根元素的样式。
contentStyle	object	{}	内容的样式。
className	string		弹出框根元素的class。
children	node	null	想要绑定弹出框的组件。

未在文档中说明的属性将会被自动加到根元素或form元素上。