跳到正文

Popover 弹出信息

Popover 在触发元素旁边弹出一个浮层。它是 raft-ui 所有弹出类组件(Tooltip、Popconfirm、Popselect、Dropdown)的底座。定位、关闭和嵌套基于 Floating UI。

演示

触发方式

trigger 可以是 hover(默认)、click、focus 或 manual。悬停触发的浮层也会在键盘聚焦时打开,在触屏上点一下打开。manual 只通过 show 打开和关闭。

位置

一共 12 个位置:先选一边,再用 -start 或 -end 对齐触发元素的那一端。空间不够时会翻到另一边(flip={false} 可以关掉),并自动平移保持在屏幕内。

标题和底部

header 和 footer 在内容上下各加一行,中间用线分开。浮层高度受限时(空间不够,或在 contentStyle 里设了 maxBlockSize),只有内容区用 ScrollArea 的滚动条滚动,标题和底部保持不动。

箭头和宽度

showArrow={false} 去掉箭头。width 设置像素宽度,传 trigger 则和触发元素一样宽。

嵌套

在浮层里再打开的浮层属于外层:点里层不会关掉外层,按 Esc 先关最里面那层。

在指定位置打开

传入 x 和 y 后,浮层在视口的这个点打开,不需要触发元素,适合右键菜单这类场景。

无样式

raw 去掉浮层自带的外观(背景、边框、内边距、箭头),只保留定位和动画,适合内容自己画外观的情况。

贴边的时候

不管触发元素在哪,浮层都会留在屏幕内,也不会把页面撑出滚动条:放不下时翻到另一边(两边都放不下就换到左右),贴边时沿着边平移、箭头仍然指着触发元素;浮层比可用空间大时,内容在浮层里滚动。试试这个框的四个角,也可以缩放窗口看看。

Props

名称类型默认值说明版本
childrenReactElement | stringundefined触发元素:一个元素,会拿到浮层的 ref 和事件。文字会被包进 span。未发布
contentReactNode | () => ReactNodeundefined浮层内容。传函数时只在浮层渲染时调用。未发布
headerReactNodeundefined内容上方的一行。未发布
footerReactNodeundefined内容下方的一行。未发布
triggerhover | click | focus | manualhover触发方式。未发布
showbooleanundefined受控的显示状态。未发布
defaultShowbooleanfalse非受控时的初始显示状态。未发布
onUpdateShow(show: boolean) => voidundefined浮层要打开或关闭时调用。未发布
placementPopoverPlacementtop在哪一边、怎么对齐。未发布
delaynumber100悬停多少毫秒后打开。未发布
durationnumber100移开多少毫秒后关闭。未发布
keepAliveOnHoverbooleantrue鼠标移到浮层上时保持打开。未发布
showArrowbooleantrue是否显示箭头。未发布
flipbooleantrue空间不够时翻到另一边。未发布
widthnumber | 'trigger'undefined像素宽度,或和触发元素同宽。未发布
x / ynumberundefined在视口的某个点打开,而不是在触发元素旁边。未发布
disabledbooleanfalse不再打开。未发布
tostring | HTMLElement | falseundefined挂载到哪里。默认是 ConfigProvider 的 portalContainer,没有则是 document.body;false 表示就地渲染。未发布
zIndexnumberundefined固定的 z-index。默认后打开的浮层叠在先打开的上面。未发布
rawbooleanfalse去掉自带外观。未发布
keepMountedbooleanfalse关闭后仍保留在 DOM 中(隐藏)。未发布
onClickoutside(event: Event) => voidundefined在触发元素和浮层之外按下时调用。未发布
contentClassNamestringundefined浮层的类名。未发布
contentStyleCSSPropertiesundefined浮层的样式。未发布

其余属性和 ref 都会传给触发元素,和它自己的属性合并(两边的事件都会执行)。多个浮层叠在同一个元素上也是这么实现的:外层的事件穿过内层,传到真正的元素上。

浮层是非模态的 dialog,通过 aria-expanded 和 aria-controls 和触发元素关联。打开时叠在所有先打开的浮层上面;portal 出去后仍然跟随当前主题。