uiUI 组件系统
对比

命令入口

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

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

INTERACTION NOTES

交互与可访问性

  • 结果支持键盘导航。
  • 关闭后返回触发位置,快捷键不影响文本输入。

和相似组件的区别

命令搜索会触发动作;普通选择器主要更新一个字段值。

RESEARCH & ALTERNATIVES

官方实现映射

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

shadcn/uiCommand
官方提供

官方命令菜单组件;搜索数据与动作由应用提供。

shadcn-svelteCommand
官方提供

Svelte 命令入口,可与 Dialog 组合。

官方提供

当前官方目录提供全文匹配的 CommandPalette。

关键状态

打开输入查询匹配结果无结果执行

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

一起了解

侧边导航 ↗历史与搜索 ↗选项选择器 ↗