Popover 弹出框

鼠标点击/移入的时候，弹出的弹出框，用于显示更多内容。

获取组件

MainIndividual
import { Popover, Whisper } from 'rsuite';
  • <Popover> 弹出框。
  • <Whisper> 监听触发器，包裹被监听对象的外面，触发事件后通知到 <Popover> 展示出来。

演示

默认

位置

触发事件

Whisper 提供了一个 trigger 属性，用于在各种场景下控制 Popover 显示。属性值包括：

  • click: 当用户点击元素时会被触发，再点击会关闭。
  • contextMenu: 当用户点击鼠标右键时触发。
  • focus: 当用户点击或触摸元素或通过键盘的 tab 键选择它时会被触发。
  • hover: 鼠标悬停到元素上时触发，鼠标离开则关闭。
  • active: 激活元素时会被触发。
  • none: 无触发事件，一般用于需要通过方法触发时候使用。

注意: Safari ignoring tabindex

容器与防止溢出

Popover 会渲染在容器内部，跟随按钮一起滚动。

与 Dropdown 组合使用

隐藏箭头

您可以通过设置 arrow 属性为 false 隐藏箭头指示器。

跟随光标

您可以通过设置 followCursor 属性为 true 来让 Popover 跟随光标移动。

Props

<Popover>

属性名称 类型 描述
arrow boolean (true) 是否显示箭头指示器
children * ReactNode 组件的内容
classPrefix string ('popover') 组件 CSS 类的前缀
title ReactNode 标题
visible boolean 组件默认可见的

<Whisper>

属性名称 类型 (默认值) 描述
container HTMLElement | (() => HTMLElement) 设置渲染的容器
controlId string 设置 id 到 <Overlay>上，并且设置 aria-describedby 到 <Whisper> 上
defaultOpen boolean 默认是否显示
delay number 延迟时间 (ms)
delayClose number 延迟关闭时间 (ms)
delayOpen number 延迟打开时间 (ms)
enterable boolean 当 trigger 值为 hover时候，鼠标是否可进入提示框浮层中
followCursor boolean 是否启用光标跟随
full boolean 撑满容器
onBlur () => void 失去焦点回调函数
onClick () => void 点击的回调函数
onClose () => void 关闭回调函数
onEnter () => void 显示前动画过渡的回调函数
onEntered () => void 显示后动画过渡的回调函数
onEntering () => void 显示中动画过渡的回调函数
onExit () => void 退出前动画过渡的回调函数
onExited () => void 退出后动画过渡的回调函数
onExiting () => void 退出中动画过渡的回调函数
onFocus () => void 获取焦点的回调函数
onOpen () => void 打开回调函数
open boolean 手动控制是否显示
placement Placement ('right') 显示位置
preventOverflow boolean 防止浮动元素溢出
speaker * Tooltip | Popover | ReactElement 展示的元素
trigger Trigger (['hover','focus']) 触发事件,可以通过数组配置多事件

Whisper methods

Whisper 上的方法可以通过 ref 获得。

const whisperRef = useRef();

<Whisper ref={whisperRef} {...}>
  ...
</Whisper>

可用的方法包括

  • open

打开一个浮层

open: (delay?: number) => void
  • close

关闭一个浮层

close: (delay?: number) => void
  • updatePosition

更新浮层位置

updatePosition: () => void

Trigger 

type Trigger =
  | Array<'click' | 'contextMenu' | 'hover' | 'focus' | 'active'>
  | 'click'
  | 'contextMenu'
  | 'hover'
  | 'focus'
  | 'active'
  | 'none';

Placement 

type Placement =
  | 'top'
  | 'bottom'
  | 'right'
  | 'left'
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd'
  | 'auto'
  | 'autoVerticalStart'
  | 'autoVerticalEnd'
  | 'autoHorizontalStart'
  | 'autoHorizontalEnd';
Vercel banner