Command 命令面板

命令面板（Command Palette）基础组件，提供快速搜索并选择命令/操作的组合式 UI，常用于全局搜索、快捷键唤起等场景。

何时使用

需要提供命令式菜单或快捷操作面板时。
需要实现类似命令面板（Command Palette）的交互时。

基础用法

<template>
  <Command class="rounded-lg border shadow-md">
    <CommandInput placeholder="输入命令搜索..." />
    <CommandList>
      <CommandEmpty>没有找到结果</CommandEmpty>
      <CommandGroup heading="建议">
        <CommandItem value="calendar">日历</CommandItem>
        <CommandItem value="emoji">搜索表情</CommandItem>
        <CommandItem value="calculator">计算器</CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="设置">
        <CommandItem value="profile">个人资料</CommandItem>
        <CommandItem value="billing">计费</CommandItem>
        <CommandItem value="settings">设置</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>

子组件

Command 由多个子组件组合而成，可自由搭配：

子组件	说明
`CommandInput`	搜索输入框，自动过滤下方条目
`CommandList`	列表容器
`CommandEmpty`	无匹配结果时的占位
`CommandGroup`	分组，`heading` 为分组标题
`CommandItem`	单个条目，`value` 用于过滤与选中
`CommandSeparator`	分隔线
`CommandShortcut`	快捷键提示（放在条目右侧）
`CommandDialog`	带弹窗的命令面板，内置 `Dialog`

导入

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@reglow/reui";

Props

Command 透传 reka-ui 的 ListboxRoot 属性，常用如下：

属性	类型	默认值	说明
`modelValue`	`string`	`""`	当前选中条目
`class`	`string`	-	根节点类名

CommandDialog 额外支持：

属性	类型	默认值	说明
`title`	`string`	`"Command Palette"`	弹窗标题（无障碍）
`description`	`string`	`"Search for a command to run..."`	弹窗描述（无障碍）

Combobox 组合框

带搜索的下拉选择，从选项列表中筛选并选中。另有 `EditableCombobox` 允许输入列表外的值。

DatePicker 日期选择器

内容锚点

何时使用
基础用法
子组件
导入
Props