命令

用于搜索和快速操作的命令菜单。

import {
  Command,
  CommandEmpty,

关于

<Command /> 组件使用了 Dip 的 cmdk 组件。

安装


pnpm dlx shadcn@latest add command

使用方法

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"

<Command className="max-w-sm rounded-lg border">
  <CommandInput placeholder="输入命令或搜索..." />
  <CommandList>
    <CommandEmpty>未找到结果。</CommandEmpty>
    <CommandGroup heading="建议">
      <CommandItem>日历</CommandItem>
      <CommandItem>搜索表情</CommandItem>
      <CommandItem>计算器</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="设置">
      <CommandItem>个人资料</CommandItem>
      <CommandItem>账单</CommandItem>
      <CommandItem>设置</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

示例

基础示例

在对话框中的简单命令菜单。

"use client"

import * as React from "react"

快捷键示例

"use client"

import * as React from "react"

分组示例

带有分组、图标和分隔符的命令菜单。

"use client"

import * as React from "react"

可滚动示例

包含多个条目的可滚动命令菜单。

"use client"

import * as React from "react"

API 参考

更多信息请参阅 cmdk 文档。

组合框上下文菜单

关于安装使用方法示例基础示例快捷键示例分组示例可滚动示例 API 参考

命令

关于

安装

使用方法

示例

基础示例

Command Palette

快捷键示例

Command Palette

分组示例

Command Palette

可滚动示例

Command Palette

API 参考