Skip to content

命令面板项

@astryxdesign/core v0.7.1 · CommandPaletteItem

使用方法 ​

CommandPaletteItem 就是结果列表里的一行。它本身不带交互,放进 CommandPaletteList 或 CommandPaletteGroup 里用。键盘那一套由 CommandPalette 统一管;单独用的时候,它只负责你明确传进来的视觉状态和鼠标点击。

ts
import { CommandPaletteItem } from '@astryx-vue/core/CommandPalette'

解剖

部分说明
项选项的根元素,负责选中、禁用、身份、交互和主题状态。
内容使用方放进去的、不带交互的文字和辅助展示。

最佳实践 ​

指引实践
推荐每个 value 在同一份结果里保持唯一,这样高亮、active-descendant 和选中才能对上同一行。
推荐行里只放不带交互的内容,例如图标、说明和快捷键提示。要点就点这一行本身,别在里面再套按钮或链接。
避免把 isHighlighted 当成选中。高亮表示键盘当前停在哪一行,isSelected 才表示选中的值。

示例 ​

常见的用法和不同的状态。

基础

New File
Open Recent
Save All
Publish (disabled)

CommandPaletteList 里可以点的一行行命令,包含高亮和禁用两种状态。想自己手动拼一个面板、不用搜索源时用它。