导航与展开@neumorphism-ui/command

Command

保留 cmdk 的筛选、活动项和键盘导航，并将输入区呈现为内嵌表面、活动项呈现为按下状态。CommandDialog 可与现有 Dialog 组合。

@neumorphism-ui/command

Registry JSON

预览

已保存

安装

npx shadcn@latest add @neumorphism-ui/command

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

"use client";
import * as React from "react";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command";

Example

export default function Example() {
  const [selected, setSelected] = React.useState("尚未选择命令");
  return <div className="grid w-full max-w-md gap-3">
    <Command>
      <CommandInput placeholder="搜索命令" />
      <CommandList>
        <CommandEmpty>没有匹配的命令。</CommandEmpty>
        <CommandGroup heading="导航">
          <CommandItem value="dashboard" onSelect={() => setSelected("仪表盘")}>仪表盘<CommandShortcut>⌘D</CommandShortcut></CommandItem>
          <CommandItem value="settings" onSelect={() => setSelected("设置")}>设置<CommandShortcut>⌘,</CommandShortcut></CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
    <p role="status" className="text-sm text-[var(--muted-foreground)]">{selected}</p>
  </div>;
}

API 参考

组件	属性	类型	默认值	说明
`Command`	`shouldFilter`	`boolean`	`true`	决定是否使用 cmdk 内置搜索筛选。
`Command`	`value / onValueChange`	`string / (value: string) => void`	`—`	控制当前活动项。
`CommandInput`	`value / onValueChange`	`string / (value: string) => void`	`—`	控制搜索词，或作为非受控输入使用。
`CommandItem`	`value / onSelect`	`string / (value: string) => void`	`—`	指定项目的搜索值和选择回调。
`CommandItem`	`disabled`	`boolean`	`false`	让项目保留在结果模型中但不可选择。

预览

安装

用法

Import

Example

API 参考

无障碍