用途:为弹出面板(Popover)和飞出菜单(Flyout)提供交互与视觉设计规范,适用于网页与移动端界面中的悬浮内容展示。
主要能力与规则: Popover 由点击触发而非悬停,可承载文本、链接、迷你表单等丰富内容;关闭方式包括点击外部、按 Escape 或显式关闭按钮;同一时间只允许一个 Popover 打开;位置贴近触发元素,在视口边缘自动翻转,并带指向触发元素的箭头。 Flyout 菜单在桌面端由悬停触发、移动端由点击触发,内容为导航链接或子选项;悬停后延迟 100-200ms 显示,光标在范围内保持打开,并容忍斜向移动以避免移向子菜单时误关闭。
设计规则:多数 Popover 最大宽度 320px;阴影与边框处理保持一致;不要嵌套 Popover,若确需嵌套应重新考虑交互方案;移动端转换为底部抽屉或全屏;内容应便于扫读,避免大段文字。
无障碍:交互式 Popover 使用 role="dialog",触发元素设置 aria-expanded,交互内容需焦点陷阱,支持 Escape 关闭。
限制:资料未提供具体实现代码、框架、安装方式、收费或平台信息。