Popover(弹出框)

弹出框是一个非模态对话框,它浮动在其触发器周围。它通常用于在某事物之上显示额外的富内容。


安装

以上命令仅用于单独安装。如果 @nextui-org/react 已全局安装,则可以跳过此步骤。

导入

NextUI 导出了 3 个与弹出框相关的组件

  • Popover:用于显示弹出框的主要组件。
  • PopoverTrigger:触发弹出框的组件。
  • PopoverContent:包含弹出框内容的组件。

用法

带箭头

颜色

位置

偏移量

受控

标题属性

为了确保弹出框向辅助技术暴露正确的标题,您应该在 PopoverContent 组件上使用 titleProps 属性。要使用此属性,您必须将一个函数作为子元素传递。

带表单

Popover 组件处理弹出框内容内的焦点。这意味着您可以毫无问题地将弹出框与表单元素一起使用。当弹出框关闭时,焦点会返回到触发器。

注意:您可以将 autoFocus 属性添加到第一个 Input 组件,以便在弹出框打开时聚焦它。

背景幕

Popover 组件有一个 backdrop 属性,用于在弹出框后面显示背景幕。背景幕可以是 transparentopaqueblur。默认值是 transparent

自定义动画

Popover 提供一个 motionProps 属性来自定义 enter / exit 动画。

了解有关 Framer motion 变体的更多信息,请点击此处

自定义触发器

插槽

  • base:主要的弹出框插槽,它包裹弹出框内容,并包含作为伪元素 (::before) 的箭头。
  • trigger:弹出框触发器插槽,它有一些小的样式以确保触发器正常工作。
  • backdrop:背景幕插槽,它包含背景幕的样式。
  • content:内容插槽,它包含弹出框内容。

自定义样式

您可以通过将自定义的 Tailwind CSS 类传递给组件插槽来自定义 Popover 组件。

数据属性

PopoverPopoverContent 元素上具有以下属性

  • data-open: 当弹出框打开时。基于弹出框的状态。
  • data-placement: 弹出框的位置。基于 placement 属性。箭头元素的位置基于此属性。
  • data-focus: 当弹出框被聚焦时。基于 useFocusRing
  • data-focus-visible: 当弹出框通过键盘聚焦时。基于 useFocusRing

无障碍性

  • 触发器和弹出框通过 ARIA 自动进行语义关联。
  • 弹出框打开时,辅助技术会隐藏弹出框外部的内容。
  • 在外部交互或按下 Escape 键时,弹出框会关闭。
  • 焦点会在挂载时移动到弹出框中,并在卸载时恢复到触发器元素。
  • 弹出框相对于触发器元素定位,并自动翻转和调整以避免与浏览器窗口边缘重叠。
  • 弹出框外部的滚动被阻止,以避免意外地重新定位或关闭它。

API

Popover 属性

属性类型默认值
children*
ReactNode[]
size
sm | md | lg
"md"
color
default | primary | secondary | success | warning | danger
"default"
radius
none | sm | md | lg | full
"lg"
shadow
none | sm | md | lg
"lg"
backdrop
transparent | opaque | blur
"transparent"
placement
PopoverPlacement
"bottom"
state
OverlayTriggerState
isOpen
boolean
defaultOpen
boolean
offset
number
"7"
containerPadding
number
"12"
crossOffset
number
"0"
triggerType
dialog | menu | listbox | tree | grid
"dialog"
showArrow
boolean
false
shouldFlip
boolean
true
triggerScaleOnOpen
boolean
true
shouldBlockScroll
boolean
true
shouldCloseOnScroll
boolean
false
isKeyboardDismissDisabled
boolean
false
shouldCloseOnBlur
boolean
false
motionProps
MotionProps
portalContainer
HTMLElement
"document.body"
disableAnimation
boolean
false
classNames
Partial<Record<'base' | 'trigger' | 'backdrop' | 'content', string>>

Popover 事件

属性类型默认值
onOpenChange
(isOpen: boolean) => void
shouldCloseOnInteractOutside
(e: HTMLElement) => void
onClose
() => void

PopoverTrigger 属性

属性类型默认值
children*
ReactNode

PopoverContent 属性

属性类型默认值
children
ReactNode

Popover 类型

Popover 位置

Motion 属性