Popover 弹出层
在触发器附近展示可交互的补充内容、筛选器或轻量表单。
使用概览
适合使用
- 用户需要临时调整少量设置且应保持页面上下文时。
不建议使用
- 内容只是一句说明,或任务复杂到需要独立对话框时。
真实示例
筛选弹出层
在触发器旁呈现临时筛选条件。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站;npm 包也只用于本地候选验证,尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/popover.json基础用法
导入
import { Popover, PopoverTrigger, PopoverContent } from "@richardqiu/quartz/popover";JSX
<Popover><PopoverTrigger>筛选</PopoverTrigger><PopoverContent>仅显示本周更新的项目</PopoverContent></Popover>状态与控制摘要
默认
键盘焦点可见
已打开
已关闭
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modal | boolean | false | 决定弹出层是否以模态方式限制外部交互。 |
组合结构
- 01
Popover - 02
PopoverTrigger - 03
PopoverContent - 04
PopoverClose
键盘约定
- Enter 或空格键打开,Tab 浏览内容,Escape 关闭并把焦点还给触发器。
可访问性契约
- PopoverContent 作为对话区域时必须具备可访问名称。
- 受控打开状态和 Portal 容器仍由使用方显式管理。