命令入口
Command Palette / Menu
通过搜索快速找到功能、对象或操作。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'command'
);
view.element.addEventListener('ui:select', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
操作较多,熟练用户希望减少导航步骤。
什么时候不用
不能让命令面板成为关键功能唯一入口。
COMPONENT API
属性与事件
传入业务数据,通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "快速查找" |
placeholder | "输入:输入 / 工具 / 来源" |
items | [{"label":"提示输入","value":"composer"},{"label":"工具调用","value":"tool"},{"label":"来源引用","value":"sources"}] |
事件
ui:select
INTERACTION NOTES
交互与可访问性
- 结果支持键盘导航。
- 关闭后返回触发位置,快捷键不影响文本输入。
和相似组件的区别
命令搜索会触发动作;普通选择器主要更新一个字段值。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Svelte / SvelteKit · 来源核验