43 lines
2.3 KiB
Markdown
43 lines
2.3 KiB
Markdown
# 下拉菜单与浮层规则
|
|
|
|
> 当任务涉及下拉选择、菜单、日期面板、提示、上下文菜单或其他依附触发器的浮层时读取；完整弹窗、抽屉和页面布局由视口与弹窗规则负责。
|
|
|
|
## 由谁负责
|
|
|
|
- 定位、碰撞检测、层级、尺寸边界和关闭行为由共享弹层组件负责。
|
|
- 使用弹层的页面只提供触发器、内容和使用场景，不传当前位置专用的偏移或宽高。
|
|
- 表格、卡片和滚动容器不负责约束浮层边界。
|
|
|
|
## 定位与视口
|
|
|
|
- 浮层优先贴近触发器，并在空间不足时翻转或移动。
|
|
- 始终保留视口安全边距，不得让根页面产生水平滚动。
|
|
- 位于可能裁切内容的滚动容器内时，使用能够脱离该裁切边界的渲染层。
|
|
- 页面滚动、容器滚动和视口尺寸变化后重新计算位置。
|
|
- 触发器离开页面、被卸载或失去当前上下文时关闭浮层。
|
|
- 多个浮层同时存在时，使用共享层级体系，不在页面实例中临时提高层级。
|
|
|
|
## 尺寸
|
|
|
|
- 普通下拉默认与触发器保持明确宽度关系，并受当前视口最大可用宽度限制。
|
|
- 名称和辅助信息按资源身份规则截断，不能依靠内容固有宽度撑大浮层。
|
|
- 高度由内容决定；超过视口可用空间时只让浮层内容区滚动。
|
|
- 紧凑菜单按内容宽度，不吸收页面剩余空间。
|
|
- 内容超出普通下拉能够清楚承载的范围时，按 [视口与弹窗规则](viewport-and-dialog-contract.md#承载方式弹窗抽屉与完整页面) 选择弹窗或完整工作区，不继续扩大普通下拉。
|
|
|
|
## 交互边界
|
|
|
|
- 单选在完成选择后关闭；多选在显式完成或点击外部时关闭。
|
|
- 浮层内操作不得意外触发底层卡片、表格行或页面操作。
|
|
- 禁用项不显示可点击反馈。
|
|
- 状态提示和帮助说明不得遮挡主操作或阻止用户关闭浮层。
|
|
|
|
## 检查
|
|
|
|
- 触发器位于视口四周时，浮层是否仍完整可见？
|
|
- 浮层是否被表格、弹窗或滚动容器裁切？
|
|
- 长名称是否撑大浮层或根页面？
|
|
- 滚动和缩放后是否仍对齐当前触发器？
|
|
- 浮层关闭后是否留下遮罩、滚动锁或不可见点击层？
|
|
- 是否因内容复杂度过高而应该改用弹窗或完整工作区？
|