浮层
Command
可筛选的动作列表——⌘K 那个面。
示例
inline
dialog
or press ⌘ K
说明
可筛选的动作列表——⌘K 那个面。
建在 cmdk 上，而不是建在 Select 或菜单上，因为这个交互两者都不是：列表随你打字实时筛选，高亮行跟着方向键走而焦点留在输入框里，回车执行高亮那一行。这就是 ARIA combobox 模式，也是最不该自己手搓的部分——“aria-activedescendant 在动而焦点不动”，恰恰是自制面板在读屏软件下失灵的那一处。
属性
这个组件没有自己的属性。
组成部分
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
CommandInput
筛选框。带着搜索图标和 combobox 语义。
这个组件没有自己的属性。
CommandList
这个组件没有自己的属性。
CommandEmpty
筛选没命中时显示。写清楚什么会命中，别写“无结果”。
这个组件没有自己的属性。
CommandFooter
底部那条键位提示。
面板是一个键盘界面，而它的键是看不见的：屏幕上没有任何东西说方向键会移动选中行、回车会执行它；一个伸手去够鼠标的读者，是被设计辜负了，而不是他自己的问题。
这个组件没有自己的属性。
CommandHint
CommandFooter 里的一组“键 + 动作”。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | 它们做什么——一个动词，小写，不要写成句子。 | |
| keys必填 | string[] | 这条提示描述的按键，用 `Kbd` 键帽打印出来。 |
同时接受 Omit<ComponentProps<'span'>, 'children'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
CommandGroup
这个组件没有自己的属性。
CommandSeparator
分组之间的分隔线。
标成纯装饰，因为 ARIA 只允许 listbox 里出现 option 和 group——而这个库把它渲染成 role="separator"，那会给每一个用到它的面板塞进一条严重的 aria-required-children 违规。分组本身已经会被播报，所以把分隔线从无障碍树里拿掉不损失任何东西。
这个组件没有自己的属性。
CommandItem
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| icon | ReactNode | 前置的图标字形。传图标元素，尺寸 16。 它是让长列表能被扫读的关键——眼睛先按形状分类再读字，四十行长得一样的文字会让这件事失效。 | |
| meta | ReactNode | 行尾一句安静的注解——这是个什么东西，或者它当前的状态。不是描述：一个每行都印一句话的面板，大约到第六行就不能扫读了。 | |
| shortcut | string | 打印在行尾的快捷键。 |
同时接受 ComponentProps<typeof CommandPrimitive.Item> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
CommandDialog
模态里的面板，也就是它几乎总是被用的那个样子。
对话框自己的内边距被去掉了：面板是通到边缘的，而且它的输入框是焦点第一个落到的地方。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| label必填 | string | 给面板起个名字，供辅助技术使用。 | |
| onOpenChange必填 | (open: boolean) => void | — | |
| open必填 | boolean | — |
键盘操作
| 按键 | 作用 |
|---|---|
| ↑↓ | 移动高亮。焦点留在输入框里，所以你打的字还能继续改。 |
| Enter | 执行高亮那一项。 |
| Escape | 关闭面板。 |
无障碍
- 列表随打字过滤，高亮随方向键移动，焦点始终留在输入框里。最后这条是 ARIA combobox 模式，也是自制面板一定会做错的地方。