popover组件

本组件基于yarn构建, 仅支持react版本, 模拟ant design的popover组件

安装

npm i tf-react-popover

引入

import Popover from 'tf-react-popover'
import 'tf-react-popover/dist/index.css'

api属性

// 基本和ant design的popover组件一致
content: null, // 卡片内容
title: null, // 卡片标题
overlayClassName: '', // 卡片类名
overlayStyle: {}, // 卡片样式
trigger: 'hover', // 触发行为，可选 hover/click
visible: false, // 用于手动控制浮层显隐
onVisibleChange: () => {}, // 显示隐藏的回调
placement: 'top', // 气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom
offset: [0, 0] // 手动设置偏移量

使用

<Popover 
  content={<div>哈哈, 我是内容</div>} 
  title="我是标题" 
  placement="rightBottom" 
  trigger="hover" 
  overlayStyle={{width: '500px'}} 
  visible={visible}
  >
  我是触发元素
</Popover>

更新日志

0.1.0
  版本发布

0.1.3
  添加offset参数;
  修复定位不准确的问题

0.1.5
  window.resize的问题