이 사이트는 shadcn-svelte 공식 문서의 한국어 번역입니다.
6.9k

Command

Previous Next

빠르고 조합 가능한 비스타일 커맨드 메뉴 컴포넌트입니다.

Docs API Reference 
<script lang="ts">
  import CalculatorIcon from "@lucide/svelte/icons/calculator";
  import CalendarIcon from "@lucide/svelte/icons/calendar";
  import CreditCardIcon from "@lucide/svelte/icons/credit-card";
  import SettingsIcon from "@lucide/svelte/icons/settings";
  import SmileIcon from "@lucide/svelte/icons/smile";
  import UserIcon from "@lucide/svelte/icons/user";
  import * as Command from "$lib/components/ui/command/index.js";
</script>
 
<Command.Root class="rounded-lg border shadow-md md:min-w-[450px]">
  <Command.Input placeholder="명령어 입력 또는 검색..." />
  <Command.List>
    <Command.Empty>결과를 찾을 수 없습니다.</Command.Empty>
    <Command.Group heading="제안">
      <Command.Item>
        <CalendarIcon />
        <span>캘린더</span>
      </Command.Item>
      <Command.Item>
        <SmileIcon />
        <span>이모지 검색</span>
      </Command.Item>
      <Command.Item disabled>
        <CalculatorIcon />
        <span>계산기</span>
      </Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="설정">
      <Command.Item>
        <UserIcon />
        <span>프로필</span>
        <Command.Shortcut>⌘P</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <CreditCardIcon />
        <span>결제</span>
        <Command.Shortcut>⌘B</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <SettingsIcon />
        <span>설정</span>
        <Command.Shortcut>⌘S</Command.Shortcut>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

설치

pnpm dlx shadcn-svelte@latest add command

사용법

<script lang="ts">
  import * as Command from "$lib/components/ui/command/index.js";
</script>
<Command.Root>
  <Command.Input placeholder="명령어를 입력하거나 검색하세요..." />
  <Command.List>
    <Command.Empty>결과를 찾을 수 없습니다.</Command.Empty>
    <Command.Group heading="제안">
      <Command.Item>캘린더</Command.Item>
      <Command.Item>이모지 검색</Command.Item>
      <Command.Item>계산기</Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="설정">
      <Command.Item>프로필</Command.Item>
      <Command.Item>결제</Command.Item>
      <Command.Item>설정</Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

예제

Dialog

⌘J 키를 누르세요

Command Palette
Search for a command to run
<script lang="ts">
  import CalculatorIcon from "@lucide/svelte/icons/calculator";
  import CalendarIcon from "@lucide/svelte/icons/calendar";
  import CreditCardIcon from "@lucide/svelte/icons/credit-card";
  import SettingsIcon from "@lucide/svelte/icons/settings";
  import SmileIcon from "@lucide/svelte/icons/smile";
  import UserIcon from "@lucide/svelte/icons/user";
  import * as Command from "$lib/components/ui/command/index.js";
 
  let open = $state(false);
 
  function handleKeydown(e: KeyboardEvent) {
    if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      open = !open;
    }
  }
</script>
 
<svelte:document onkeydown={handleKeydown} />
 
<p class="text-muted-foreground text-sm">
  <kbd
    class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none"
  >
    <span class="text-xs">⌘</span>J
  </kbd>
  키를 누르세요
</p>
<Command.Dialog bind:open>
  <Command.Input placeholder="명령어 입력 또는 검색..." />
  <Command.List>
    <Command.Empty>결과를 찾을 수 없습니다.</Command.Empty>
    <Command.Group heading="제안">
      <Command.Item>
        <CalendarIcon class="me-2 size-4" />
        <span>캘린더</span>
      </Command.Item>
      <Command.Item>
        <SmileIcon class="me-2 size-4" />
        <span>이모지 검색</span>
      </Command.Item>
      <Command.Item>
        <CalculatorIcon class="me-2 size-4" />
        <span>계산기</span>
      </Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="설정">
      <Command.Item>
        <UserIcon class="me-2 size-4" />
        <span>프로필</span>
        <Command.Shortcut>⌘P</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <CreditCardIcon class="me-2 size-4" />
        <span>결제</span>
        <Command.Shortcut>⌘B</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <SettingsIcon class="me-2 size-4" />
        <span>설정</span>
        <Command.Shortcut>⌘S</Command.Shortcut>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Dialog>

대화상자에 커맨드 메뉴를 표시하려면 <Command.Root /> 대신 <Command.Dialog /> 컴포넌트를 사용하세요. <Dialog.Root />와 <Command.Root /> 컴포넌트의 props를 모두 받습니다.

lib/components/example-command-menu.svelte
<script lang="ts">
  import * as Command from "$lib/components/ui/command/index.js";
  import { onMount } from "svelte";
 
  let open = $state(false);
 
  function handleKeydown(e: KeyboardEvent) {
    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      open = !open;
    }
  }
</script>
 
<svelte:document onkeydown={handleKeydown} />
 
<Command.Dialog bind:open>
  <Command.Input placeholder="명령어를 입력하거나 검색하세요..." />
  <Command.List>
    <Command.Empty>결과를 찾을 수 없습니다.</Command.Empty>
    <Command.Group heading="제안">
      <Command.Item>캘린더</Command.Item>
      <Command.Item>이모지 검색</Command.Item>
      <Command.Item>계산기</Command.Item>
    </Command.Group>
  </Command.List>
</Command.Dialog>

Combobox

<Command /> 컴포넌트를 콤보박스로 사용할 수 있습니다. 자세한 내용은 콤보박스 페이지를 참고하세요.

변경 이력

2024-10-30 아이콘 클래스

  • <Command.Item> 컴포넌트에 gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0를 추가하여 내부 아이콘이 자동으로 스타일링되도록 했습니다.