有时候,你可能需要绑定一个对话框到某个元素上,她不需要像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元素上。