命令面板输入框
@astryxdesign/core v0.7.1 · CommandPaletteInput
CtrlK
Home
Settings
Profile
Help
使用方法
把它放进 CommandPalette 里,就是那个带结果弹层的搜索框;不在弹层里时,它也能单独当一个搜索框用。
ts
import { CommandPaletteInput } from '@astryx-vue/core/CommandPalette'解剖
| 部分 | 说明 |
|---|---|
| 输入区 | 把搜索符号、查询框和尾部内容装在一起的行内布局。 |
| 搜索符号 | 查询框前面那个装饰用的搜索图标。 |
| 查询框 | 原生文本框。单独用、没有弹层关系时是 searchbox;给了弹层关系,或者身处 CommandPalette 里时是 combobox。 |
| 加载转圈 | 搜索进行中时,出现在尾部内容前面的转圈,会先等一小会儿再出现。 |
| 尾部内容 | 使用方放在尾部的内容,例如清空按钮或快捷键提示。 |
最佳实践
| 指引 | 实践 |
|---|---|
| 推荐 | 「Search commands」说不清能搜什么时,自己写一句简短的 label 补上。占位文字永远不能代替这个字段的名字。 |
| 推荐 | 尾部只放短小的辅助控件或快捷键提示,用 endContent。 |
| 避免 | 自己改 combobox 的角色或弹层状态。接了 CommandPalette 之后,这些语义归 CommandPaletteInput 管。 |
示例
常见的用法和不同的状态。
带尾部内容
CtrlK
Home
Settings
Profile
Help
自定义占位文字,并用 endContent 在尾部放一枚快捷键徽章。