Popover

气泡卡片

基础使用

function App() {
  const UIPopover = (props) => {
    return (
      <Popover
        type={'normal'}
        trigger={props.trigger}
        placement="top-end"
        anchor={
          <Button type="primary">{props.text}</Button>
        }
      >
        显示完整文案
      </Popover>
    )
  }
  return (
    <div className="ykui-demo-row">
      {UIPopover({trigger: 'click', text: 'click 激活'})}
      {UIPopover({trigger: 'hover', text: 'hover 激活'})}
      
      <Popover
        type={'normal'}
        trigger="focus"
        placement="top-end"
        anchor={
          <Button type="primary">focus 激活</Button>
        }
      >
        显示完整文案
      </Popover>
    </div>
  );
}

显示位置

function App() {
  const UIPopover = (props) => {
    return (
      <Popover
        type={'normal'}
        trigger={'click'}
        placement={props.placement}
        anchor={
          <Button type="primary">{props.text}</Button>
        }
      >
        显示完整文案
      </Popover>
    )
  }
  return (
    <div className="ykui-demo-row">
      <Popover
        type={'normal'}
        trigger="click"
        placement="top"
        anchor={
          <Button type="primary">top</Button>
        }
      >
        显示完整文案
      </Popover>

      {UIPopover({placement: 'top-end', text: 'top-end'})}
      {UIPopover({placement: 'top-start', text: 'top-start'})}
      {UIPopover({placement: 'bottom-end', text: 'bottom-end'})}
      {UIPopover({placement: 'bottom', text: 'bottom'})}
      {UIPopover({placement: 'bottom-start', text: 'bottom-start'})}
      
    </div>
  );
}

Popover API

属性	说明	类型	默认值
children	显示内容	ReactNode	--
placement	显示的位置	bottomLeft〡bottom〡bottomRight〡topLeft〡top〡topRight〡left〡leftTop〡leftBottom〡right	top
trigger	触发方式	hover〡click〡focus	--
anchor	触发的元素	ReactNode	--
autoAdjust	弹窗被遮挡时是否自动调整方向	none〡forward〡oblique〡all	--
placementClass	悬浮显示框类名	string	--
contentClass	悬浮显示段落类名	string	--
container	指定挂载的dom	any	body
visible	是否显示	boolean	--
operationButtons	排除click outside的按钮	array	--
onVisibleChange	显示或者隐藏时调用	Function	--
mouseEnterDelay	显示弹窗延迟	number	--
mouseLeaveDelay	关闭弹窗延迟	number	--
injectPositionStyle	是否为overlay注入位置样式	boolean	--
autoFixedScroll	自动监听滚动条滚动	boolean	true
style	自定义style	object	--
closeOnEscape	按下Escape关闭	boolean	false
closeOnClickOutside	鼠标点击其他地方关闭	boolean	false

autoAdjust API

值	说明
forward	正向调整 如向正上弹出 但顶部超出 自动调整为向正下弹出
oblique	斜向调整 如向上弹出 当左侧超出时 自动调整为朝上左方向
all	包含上述两种都调整