Popover

Popover 是一种非模态对话框，会悬浮在其触发元素周围。它通常用于在某个元素之上叠加展示额外的丰富内容。

Storybook Source Recipe Source

Usage

Colors

Placements

Offset

使用 offset 属性可以设置 Popover 的偏移量，包括主轴和交叉轴的偏移。设置 false 可禁用偏移。

Flip

使用 flip 属性可以更改 Popover 的位置，使其保持在视图中。默认值为 { mainAxis: true, crossAxis: true }。设置 false 可禁用翻转行为。

Shift

使用 shift 属性可以移动 Popover 以保持其在视图中。默认为 true。

With Form

Popover 会处理其弹窗内容内的焦点。这意味着您可以将 Popover 与表单元素搭配使用，完全没有问题。当 Popover 关闭时，焦点会返回至触发元素。

Controlled

Open: No

Custom Motion

使用 motionProps 属性自定义 visible / hidden 的动画效果。

API

Popover 继承 as (默认为 m.div) 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	Popover 的内容，通常为 PopoverTrigger 和 PopoverContent 组件。
container	HTMLElement \| null\|() => HTMLElement \| null	document.body	放置 Portal 的容器元素。
open	boolean	-	控制 Popover 的打开状态。(受控)
defaultOpen	boolean	-	Popover 的默认打开状态。(非受控)
onOpenChange	(open: boolean) => void	-	当 Popover 打开/关闭时触发回调函数。
placement	'top'\|'top-start'\|'top-end'\|'bottom'\|'bottom-start'\|'bottom-end'\|'left'\|'left-start'\|'left-end'\|'right'\|'right-start'\|'right-end'	'top'	Popover 出现的位置。
motionProps	HTMLMotionProps	-	自定义 Popover 动画的属性。
offset	false\|number\|{ mainAxis?: number; crossAxis?: number }	5	设置 Popover 的偏移量，或禁用偏移。
flip	false\|{ mainAxis?: boolean; crossAxis?: boolean }	{ mainAxis: true, crossAxis: true }	更改 Popover 的位置，使其保持在视图中。
shift	boolean	true	移动popper元素以使其保持在可见范围内。
keepMounted	boolean	false	即使 Popover 未打开也保持其挂载状态。
closeOnEscape	boolean	true	按下 Escape 键时是否关闭 Popover 。
closeOnDetached	boolean	true	当触发元素被完全遮挡时是否关闭 Popover 。
openDelay	number	0	显示 Popover 前的延迟时间（毫秒）。
closeDelay	number	0	隐藏 Popover 前的延迟时间（毫秒）。
ref	Ref	-	用于转发 Popover 根元素的 ref。
className	ClassValue	-	用于根元素的 className 。
as	ElementType	m.div	用于 Popover 根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。

PopoverContent Props

PopoverContent 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	PopoverContent 的内容。
color	'default'\|'blue'\|'orange'\|'yellow'\|'cyan'\|'red'\|'green'\|'pink'\|'purple'\|'gray'	'default'	PopoverContent 的颜色。
maxWidth	CSSObject['maxWidth']	480	PopoverContent 的最大宽度。
maxHeight	CSSObject['maxHeight']	-	PopoverContent 的最大高度。
radius	'none'\|'sm'\|'md'\|'lg'\|'full'	'md'	PopoverContent 的圆角大小。
ref	Ref	-	用于转发 PopoverContent 根元素的 ref。
className	ClassValue	-	用于根元素的 className。
as	ElementType	'div'	用于 PopoverContent 根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。

PopoverTrigger Props

Prop	Type	Default	Description
children	ReactNode	-	触发元素，点击时显示 Popover 。
closeOnClick	boolean	true	点击触发元素时是否关闭 Popover 。

PopoverClose Props

Prop	Type	Default	Description
children	ReactNode	-	触发元素，点击时关闭 Popover 。