SuperAPI AI 工具集

hover

编程与开发

查看项目

更新于 10-23 05:08

技能介绍

分段说明:本条目来自 microsoft/vscode 仓库,主题为 Hovers and tooltips(悬停与工具提示)。资料为面向 VS Code 界面控件开发者的实现指南。

用途 用于在 VS Code 的控件和界面元素(按钮、动作、工具栏、列表、树等)上添加、修改或审查悬停提示时参考,帮助实现统一、可预期的悬停交互。

主要能力(规范要点)

  1. 交互节奏:首次进入悬停应保持平静,遵循 workbench.hover.delay 延迟;在相关控件之间移动时保持一致,相近的相似目标在悬停交互仍处于活动状态时立即显示;控件边界不应引入额外延迟。
  2. 默认使用自定义悬停:使用控件的 hover API 或 IHoverService,不使用 element.title 或 setAttribute('title', ...) 的原生浏览器提示;引入自定义悬停时应移除冲突的 HTML title 属性。控件自身 title/tooltip 选项若经自定义机制路由仍可正确,应查看实现而非按名称禁止。
  3. 原生 tooltip 作为窄例外:仅用于已存在自定义悬停/上下文视图内的控件,此时再开一个自定义悬停会干扰父级;通过控件支持的 hoverDelegate 选项传入 nativeHoverDelegate,不手写 title 属性。不应为解决单个嵌套控件问题而把整个特性改为原生;HoverService 支持有限的嵌套悬停,需先检查实际父子/上下文视图交互。
  4. 放置与指针搭配:指针指连接悬停与目标的小箭头,不是鼠标光标。小按钮、工具栏动作、图标动作等小型可点击目标用元素锚定并始终带指针;带简单文本提示的普通列表/树项用鼠标锚定且不带指针;信息丰富的大型列表/树行悬停用元素锚定置于行左或右并带指针;其他 UI 元素通常元素锚定,元素锚定时带指针。延迟元素悬停用 setupDelayedHover 并设置 style: HoverStyle.Pointer,或显式 appearance.showPointer: true;裸 setupDelayedHover 不会自动加指针,HoverStyle.Pointer 同时默认紧凑样式。鼠标放置用 setupDelayedHoverAtMouse,通常配 HoverStyle.Mouse,永不请求指针。富行悬停设置 position.hoverPosition 为 LEFT 或 RIGHT 以免遮挡相邻行,保留视口感知回退。委托式控件使用 placement: 'element' 配指针,或 'mouse' 不配指针。
  5. 按控件支持的 API 接入:接受 hoverDelegate 的现有控件(按钮、动作项、动作栏、工具栏)传入共享的即时启用 IHoverDelegate;新的直接注册或接受 hoverLifecycleOptions 的控件使用带共享 groupId 的延迟悬停;特性已拥有触发事件并需控制显示时用 showDelayedHover(options, { groupId }) 并自行管理返回悬停的生命周期。新直接注册优先 setupDelayedHover / setupDelayedHoverAtMouse;setupManagedHover 已弃用但现有控件内部仍用。可用时通过构造函数注入 IHoverService;在 vs/base 中用 getBaseLayerHoverDelegate() 或接受调用方的委托/生命周期选项。不得用无条件 showInstantHover、零延迟、自建定时器或 reducedDelay 代替分组,首次普通指针触发的悬停仍须遵循配置的工作台延迟。
  6. 在视觉组内共享即时悬停状态:按用户所见而非类归属划分边界,相邻相似动作的两个工具栏属于同一悬停组。委托式控件在公共所有者处创建一次 createInstantHoverDelegate() 并传给所有相关控件;getDefaultHoverDelegate('element') 只给元素放置不启用即时悬停;ToolBar 和 ActionBar 未传委托时各自创建即时委托,仅在本控件内分组,要跨相邻控件需显式传入共同委托;自定义 actionViewItemProvider 要转发 incoming action-view-item 选项尤其是 hoverDelegate,不要为每项、每工具栏或在 provider 内创建委托。若构造 WorkbenchHoverDelegate 做特性覆盖,为元素放置组启用 { instantHover: true } 并共享该实例,避免通过 appearance 覆盖误关指针。
  7. 延迟悬停分组:为相关目标选一个稳定 groupId 放进生命周期选项而非内容/外观选项;在该渲染界面上创建一次分组,不在每次注册或选项工厂内创建,并传入暴露 hoverLifecycleOptions 的相邻子控件。当前可见悬停属于同组时延迟悬停跳过延迟;与委托路径不同,这不是共享的最近隐藏计时器。独立实例需保持分离时用每实例 UUID;特性特定字符串仅在所有使用都刻意同组时使用;不要给无关控件用同一个全局 ID,也不要每项新 ID;不要把 groupId 与 IHoverOptions.id(控制悬停相等性而非分组)混淆。委托与延迟悬停机制相互独立,groupId 不连接 IHoverDelegate 状态;视觉组跨两种 API 时需检查控件支持的扩展点并有意对齐。富列表行保持行分组与不同内联动作分开并结合侧置;跨相关行复用 rowHoverLifecycleOptions。
  8. 所有权与可访问性:新建的限定作用域委托立即注册到其所有者的 disposable store;父级提供的委托为借用,由父级负责释放。延迟悬停监听器和手动显示的悬停控件注册到合适的组件、模板或渲染 store,重复渲染不得在长寿命 store 上累积注册。使用本地化提示文本,保留可访问名称、键盘激活、焦点恢复和 Escape 关闭;工具提示不能替代可访问标签。延迟悬停的 setupKeyboardEvents: true 会加 Enter/Space 显示并聚焦悬停,仅在目标动作或导航行为未占用这些键时使用。保持富悬停内容及其链接/动作可到达,不要对用户必须交互的内容强制 hideOnHover: true。

使用方式 该资料为开发实现指南,需在阅读目标控件及周边组件后,按控件支持的 API 接入悬停;文中给出代码示例(包括创建共享委托、传递 hoverLifecycleOptions、富行悬停设置等),实际采用需结合所在 VS Code 代码环境。具体安装命令、版本要求等资料暂未提供。

适用场景 适用于在 VS Code 控件(按钮、动作、工具栏、列表、树等)上开发或审查悬停与工具提示功能的 VS Code 贡献者与扩展开发者。

限制 资料为规范指南,未提供产品价格、平台支持范围、效果指标或独立安装步骤;部分机制(如嵌套悬停)支持有限,需按实际父子交互判断例外。