操作菜单
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
INTERACTION NOTES
交互与可访问性
- 支持方向键、Escape 和返回触发器。
- 危险操作有清晰名称与适当确认。
和相似组件的区别
Menu 触发动作;Select 更新一个选择值。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Svelte / SvelteKit · 来源核验