@sinoui/pop

弹出效果组件

弹出效果组件是用于给指定元素的点击或者 hover 动作添加一个附着的弹出框。

特性：

• [x] 可自由控制弹出内容的渲染
• [x] 可以包含任何内容
• [x] 支持点击和 hover
• [x] 进场、出场动画
• [x] 弹出框的显示位置
• [x] 支持在 Modal 中使用
• [x] 支持自调整位置，不能超出屏幕之外
• [x] z-index

使用方式：

import Pop from '@sinoui/pop';

export default function PopDemo() {
  return (
    <Pop render={() => <div>这是弹出的内容</div>}>
      <div>这是内容</div>
    </Pop>
  );
}

Pop 组件有以下属性：

属性名	属性类型	属性说明
render	({close}) => React.ReactNode	渲染弹出内容的函数
children	React.ReactNode	应用效果的内容
className	string	应用到容器的类
style	React.CSSProperties	应用到容器上的样式
popContentClassName	string	应用到弹出框上的类
popContentStyle	React.CSSProperties	应用到弹出框上的样式
popAction	'click' 或者 'hover'	弹出效果的动作类型。默认为 click
verticalPosition	'top' 或者 'bottom' 或者 'center'	弹出框在垂直方向的位置
horizontalPosition	'left' 或者 'right' 或者 'center'	弹出框在水平方向的位置
verticalOrigionPosition	'top' 或者 'bottom' 或者 'center'	弹出框定位时垂直方向的原点位置
horizontalOriginPosition	'left' 或者 'right' 或者 'center'	弹出框在水平方向的原点位置
innerRef	(dom?: HTMLElement) => void	引用 dom 元素

弹出框显示的默认位置：

• verticalPosition: 'bottom'
• horizontalPosition: 'left'
• verticalOrigionPosition: 'top'
• horizontalOriginPosition: 'left'

关于弹出框的位置

弹出框的位置是弹出框的原点相对于参照物的原点重合定义的。verticalPosition和horizontalPosition是定义参照物的原点的位置，verticalOriginPositon和horizontalOriginPosition是定义弹出框的原点位置。如：

定义参照物的原点位置为参照物的顶点：

<Pop verticalPosition="top" horizontalPosition="left" />

定义参照物的原点位置位于参照物的顶部并且水平居中的位置：

<Pop verticalPosition="top" horizontalPosition="center" />