Popover

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

Anatomy

NexUI 导出了 4 个 Popover 相关组件:

Popover: 用于显示 Popover 的根组件。
PopoverTrigger: 用于触发 Popover 打开的组件。
PopoverContent: 用于显示 Popover 内容的组件。
PopoverClose: 用于触发 Popover 关闭的组件。


import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverClose,
} from '@nex-ui/react'

Usage

Colors

Placements

Offset

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

Flip

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

Shift

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

With Form

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

Controlled

Open: No

API

Prop	Type	Default	Description
children	ReactNode	-	通常是 PopoverTrigger 和 PopoverContent 组件。
open	boolean	-	控制 Popover 的打开状态。(受控)
defaultOpen	boolean	-	Popover 的默认打开状态。(非受控)
onOpenChange	(open: boolean) => void	-	当 Popover 打开/关闭时触发回调函数。
onClose	() => void	-	当 Popover 关闭时触发回调函数。

PopoverContent Props

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

Prop	Type	Default	Description
children	ReactNode	-	Popover 的内容。
ref	Ref	-	用于转发 Popover 根元素的 ref。
className	ClassValue	-	用于 Popover 根元素的 className。
as	ElementType	'div'	用于 Popover 根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于 Popover 根元素的 sx 属性。
classNames	Partial<Record<Slots, ClassValue>>	-	用于 Popover 各个部分的 classNames。
slotProps	Partial<Record<Slots, ComponentProps>>	-	用于 Popover 各个部分的 slotProps。
color	'default'\|'blue'\|'orange'\|'yellow'\|'cyan'\|'red'\|'green'\|'pink'\|'purple'\|'gray'	'default'	Popover 的颜色。
maxWidth	CSSObject["maxWidth"]	300	Popover 的最大宽度。
width	CSSObject["width"]	-	Popover 的宽度。
minWidth	CSSObject["minWidth"]	-	Popover 的最小宽度。
radius	'none'\|'sm'\|'md'\|'lg'	'md'	Popover 的圆角大小。
container	HTMLElement \| null\|() => HTMLElement \| null	document.body	放置 Portal 的容器元素。
placement	'top'\|'top-start'\|'top-end'\|'bottom'\|'bottom-start'\|'bottom-end'\|'left'\|'left-start'\|'left-end'\|'right'\|'right-start'\|'right-end'	'bottom'	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	移动 Popover 元素以使其保持在可见范围内。
keepMounted	boolean	false	即使 Popover 未打开也保持其挂载状态。
closeOnEscape	boolean	true	按下 Escape 键时是否关闭 Popover 。
closeOnDetached	boolean	true	当触发元素被完全遮挡时是否关闭 Popover 。
disableAnimation	boolean	false	是否禁用 Popover 的动画效果。
loopFocus	boolean	true	是否在 Popover 内循环焦点。
restoreFocus	boolean	true	是否在 Popover 关闭时恢复焦点到之前聚焦的元素。
autoFocus	boolean	false	是否在 Popover 打开时自动聚焦到第一个可聚焦元素。
size	'sm'\|'md'\|'lg'	'md'	Popover 的大小。

PopoverContent Slots

Slot Name	Class Name	Default Component	Description
paper	.nui-popover-content-paper	'div'	Popover 的内容容器。

PopoverTrigger Props

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

PopoverClose Props

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