Files

2.3 KiB

下拉菜单与浮层规则

当任务涉及下拉选择、菜单、日期面板、提示、上下文菜单或其他依附触发器的浮层时读取;完整弹窗、抽屉和页面布局由视口与弹窗规则负责。

由谁负责

  • 定位、碰撞检测、层级、尺寸边界和关闭行为由共享弹层组件负责。
  • 使用弹层的页面只提供触发器、内容和使用场景,不传当前位置专用的偏移或宽高。
  • 表格、卡片和滚动容器不负责约束浮层边界。

定位与视口

  • 浮层优先贴近触发器,并在空间不足时翻转或移动。
  • 始终保留视口安全边距,不得让根页面产生水平滚动。
  • 位于可能裁切内容的滚动容器内时,使用能够脱离该裁切边界的渲染层。
  • 页面滚动、容器滚动和视口尺寸变化后重新计算位置。
  • 触发器离开页面、被卸载或失去当前上下文时关闭浮层。
  • 多个浮层同时存在时,使用共享层级体系,不在页面实例中临时提高层级。

尺寸

  • 普通下拉默认与触发器保持明确宽度关系,并受当前视口最大可用宽度限制。
  • 名称和辅助信息按资源身份规则截断,不能依靠内容固有宽度撑大浮层。
  • 高度由内容决定;超过视口可用空间时只让浮层内容区滚动。
  • 紧凑菜单按内容宽度,不吸收页面剩余空间。
  • 内容超出普通下拉能够清楚承载的范围时,按 视口与弹窗规则 选择弹窗或完整工作区,不继续扩大普通下拉。

交互边界

  • 单选在完成选择后关闭;多选在显式完成或点击外部时关闭。
  • 浮层内操作不得意外触发底层卡片、表格行或页面操作。
  • 禁用项不显示可点击反馈。
  • 状态提示和帮助说明不得遮挡主操作或阻止用户关闭浮层。

检查

  • 触发器位于视口四周时,浮层是否仍完整可见?
  • 浮层是否被表格、弹窗或滚动容器裁切?
  • 长名称是否撑大浮层或根页面?
  • 滚动和缩放后是否仍对齐当前触发器?
  • 浮层关闭后是否留下遮罩、滚动锁或不可见点击层?
  • 是否因内容复杂度过高而应该改用弹窗或完整工作区?