Skip to content

命令面板输入框

@astryxdesign/core v0.7.1 · CommandPaletteInput

使用方法 ​

把它放进 CommandPalette 里,就是那个带结果弹层的搜索框;不在弹层里时,它也能单独当一个搜索框用。

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

解剖

部分说明
输入区把搜索符号、查询框和尾部内容装在一起的行内布局。
搜索符号查询框前面那个装饰用的搜索图标。
查询框原生文本框。单独用、没有弹层关系时是 searchbox;给了弹层关系,或者身处 CommandPalette 里时是 combobox。
加载转圈搜索进行中时,出现在尾部内容前面的转圈,会先等一小会儿再出现。
尾部内容使用方放在尾部的内容,例如清空按钮或快捷键提示。

最佳实践 ​

指引实践
推荐「Search commands」说不清能搜什么时,自己写一句简短的 label 补上。占位文字永远不能代替这个字段的名字。
推荐尾部只放短小的辅助控件或快捷键提示,用 endContent。
避免自己改 combobox 的角色或弹层状态。接了 CommandPalette 之后,这些语义归 CommandPaletteInput 管。

示例 ​

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

带尾部内容

自定义占位文字,并用 endContent 在尾部放一枚快捷键徽章。