浮层组件版本 0.1.0

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 · boolean

API 参考

属性类型默认值说明
modalbooleanfalse决定弹出层是否以模态方式限制外部交互。

组合结构

  1. 01Popover
  2. 02PopoverTrigger
  3. 03PopoverContent
  4. 04PopoverClose

键盘约定

  • Enter 或空格键打开,Tab 浏览内容,Escape 关闭并把焦点还给触发器。

可访问性契约

  • PopoverContent 作为对话区域时必须具备可访问名称。
  • 受控打开状态和 Portal 容器仍由使用方显式管理。