ナビゲーションと開示@neumorphism-ui/command

Command

cmdk のフィルタリング、アクティブ項目、キーボード操作を維持し、入力を inset、選択項目を押し込まれた表面で表現します。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`	`—`	検索文字列を制御するか uncontrolled 入力として使います。
`CommandItem`	`value / onSelect`	`string / (value: string) => void`	`—`	項目の検索値と選択時のコールバックを指定します。
`CommandItem`	`disabled`	`boolean`	`false`	検索結果には残しつつ選択できない状態にします。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ