Popover(弹出框)
弹出框是一个非模态对话框,它浮动在其触发器周围。它通常用于在某事物之上显示额外的富内容。
安装
以上命令仅用于单独安装。如果 @nextui-org/react
已全局安装,则可以跳过此步骤。
导入
NextUI 导出了 3 个与弹出框相关的组件
- Popover:用于显示弹出框的主要组件。
- PopoverTrigger:触发弹出框的组件。
- PopoverContent:包含弹出框内容的组件。
用法
带箭头
颜色
位置
偏移量
受控
标题属性
为了确保弹出框向辅助技术暴露正确的标题,您应该在 PopoverContent
组件上使用 titleProps
属性。要使用此属性,您必须将一个函数作为子元素传递。
带表单
Popover
组件处理弹出框内容内的焦点。这意味着您可以毫无问题地将弹出框与表单元素一起使用。当弹出框关闭时,焦点会返回到触发器。
注意:您可以将
autoFocus
属性添加到第一个Input
组件,以便在弹出框打开时聚焦它。
背景幕
Popover
组件有一个 backdrop
属性,用于在弹出框后面显示背景幕。背景幕可以是 transparent
、opaque
或 blur
。默认值是 transparent
。
自定义动画
Popover 提供一个 motionProps
属性来自定义 enter
/ exit
动画。
了解有关 Framer motion 变体的更多信息,请点击此处。
自定义触发器
插槽
- base:主要的弹出框插槽,它包裹弹出框内容,并包含作为伪元素 (::before) 的箭头。
- trigger:弹出框触发器插槽,它有一些小的样式以确保触发器正常工作。
- backdrop:背景幕插槽,它包含背景幕的样式。
- content:内容插槽,它包含弹出框内容。
自定义样式
您可以通过将自定义的 Tailwind CSS 类传递给组件插槽来自定义 Popover
组件。
数据属性
Popover
在 PopoverContent
元素上具有以下属性
- data-open: 当弹出框打开时。基于弹出框的状态。
- data-placement: 弹出框的位置。基于
placement
属性。箭头元素的位置基于此属性。 - data-focus: 当弹出框被聚焦时。基于 useFocusRing。
- data-focus-visible: 当弹出框通过键盘聚焦时。基于 useFocusRing。
无障碍性
- 触发器和弹出框通过 ARIA 自动进行语义关联。
- 弹出框打开时,辅助技术会隐藏弹出框外部的内容。
- 在外部交互或按下 Escape 键时,弹出框会关闭。
- 焦点会在挂载时移动到弹出框中,并在卸载时恢复到触发器元素。
- 弹出框相对于触发器元素定位,并自动翻转和调整以避免与浏览器窗口边缘重叠。
- 弹出框外部的滚动被阻止,以避免意外地重新定位或关闭它。
API
Popover 属性
属性 | 类型 | 默认值 |
children* |
| |
size |
| "md" |
color |
| "default" |
radius |
| "lg" |
shadow |
| "lg" |
backdrop |
| "transparent" |
placement |
| "bottom" |
state |
| |
isOpen |
| |
defaultOpen |
| |
offset |
| "7" |
containerPadding |
| "12" |
crossOffset |
| "0" |
triggerType |
| "dialog" |
showArrow |
| false |
shouldFlip |
| true |
triggerScaleOnOpen |
| true |
shouldBlockScroll |
| true |
shouldCloseOnScroll |
| false |
isKeyboardDismissDisabled |
| false |
shouldCloseOnBlur |
| false |
motionProps |
| |
portalContainer |
| "document.body" |
disableAnimation |
| false |
classNames |
|
Popover 事件
属性 | 类型 | 默认值 |
onOpenChange |
| |
shouldCloseOnInteractOutside |
| |
onClose |
|
PopoverTrigger 属性
属性 | 类型 | 默认值 |
children* |
|
PopoverContent 属性
属性 | 类型 | 默认值 |
children |
|