uiUI 组件系统
对比

操作菜单

Menu / Dropdown Menu

把相关命令收进一个可打开的操作列表。

交互预览实时预览
打开菜单,选择一个链接
使用代码安装指南 ↗
app.mjs
import { mount } from '@sofish/ui/browser';

const view = mount(
  document.querySelector('#example'),
  'menu'
);

view.element.addEventListener('ui:open', event => {
  console.log(event.detail.value);
});

// view.update({ ...nextProps });
// view.destroy();

什么时候用

次要操作、对象动作或一组命令。

什么时候不用

选择字段值时使用 Select,不混用菜单角色。

COMPONENT API

属性与事件

传入业务数据,通过事件连接你的应用。

属性默认值
label"条目操作"
items[{"label":"浏览组件目录","href":"/"},{"label":"查看官方来源","href":"/libraries/"},{"label":"研究方法","href":"/about/"}]

事件

ui:open

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

INTERACTION NOTES

交互与可访问性

  • 支持方向键、Escape 和返回触发器。
  • 危险操作有清晰名称与适当确认。

和相似组件的区别

Menu 触发动作;Select 更新一个选择值。

RESEARCH & ALTERNATIVES

官方实现映射

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

Radix PrimitivesDropdown Menu
官方提供

命令、子菜单和可选菜单项。

SkeletonMenu
官方提供

Svelte 框架菜单组件。

关键状态

关闭打开活动项禁用项

React / Next.js、Svelte / SvelteKit · 来源核验

一起了解

上下文菜单 ↗选项选择器 ↗命令入口 ↗