简体中文

冒泡弹出框

有时候,你可能需要绑定一个对话框到某个元素上,她不需要像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="http://oekm6wrcq.bkt.clouddn.com/hana-ui/himawari.png" alt="rich text" />
              </div>
            )}
          >
            <Button>Click me!</Button>
          </Popover>
        </ExampleBlock>
      </div>
    );
  }
}

此组件基于Tooltip组件,但提供了titlesubTitlecontent属性来实现基本功能。

属性说明

属性名 类型 默认值 说明
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元素上。