上下文菜单
Context Menu
为某个对象显示就地相关的操作。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'context-menu'
);
view.element.addEventListener('ui:select', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
文件、表格行或画布对象的快捷动作。
什么时候不用
只有右键入口会排除触屏与键盘用户,必须另有可发现入口。
COMPONENT API
属性与事件
传入业务数据,通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "被操作的条目" |
items | [{"value":"copy","label":"复制地址"},{"value":"compare","label":"加入对比"},{"value":"sources","label":"查看来源"}] |
help | "右键、Shift+F10 或点击打开操作菜单" |
事件
ui:select
INTERACTION NOTES
交互与可访问性
- 提供键盘或按钮替代入口。
- 操作目标必须明确,关闭后恢复合理焦点。
和相似组件的区别
Context Menu 与对象和触发位置关联;普通下拉菜单有固定触发控件。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js · 来源核验