uiUI 组件系统
对比

上下文菜单

Context Menu

为某个对象显示就地相关的操作。

交互预览实时预览

右键、Shift+F10 或点击打开操作菜单

点击、右键或 Shift+F10 打开
使用代码安装指南 ↗
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

安装、生命周期与完整 API ↗

INTERACTION NOTES

交互与可访问性

  • 提供键盘或按钮替代入口。
  • 操作目标必须明确,关闭后恢复合理焦点。

和相似组件的区别

Context Menu 与对象和触发位置关联;普通下拉菜单有固定触发控件。

RESEARCH & ALTERNATIVES

官方实现映射

以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。

Radix PrimitivesContext Menu
官方提供

提供右键触发与子菜单交互。

关键状态

关闭打开子菜单禁用项

React / Next.js · 来源核验

一起了解

操作菜单 ↗命令入口 ↗数据表格 ↗