컴포넌트/Command

Command

⌘K 스타일의 커맨드 팔레트 컴포넌트입니다. 검색과 빠른 액션 실행에 사용됩니다.

설치

Terminal
npx @msub-core/ui-cli add command

사용법

TSX
import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandDialog,
} from "@msub-core/ui/components/command"

function MyComponent() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Command</Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput placeholder="검색..." />
        <CommandList>
          <CommandEmpty>결과가 없습니다</CommandEmpty>
          <CommandGroup heading="제안">
            <CommandItem>캘린더</CommandItem>
            <CommandItem>검색</CommandItem>
          </CommandGroup>
        </CommandList>
      </CommandDialog>
    </>
  )
}

기본

결과가 없습니다
제안
캘린더
이모지 검색
계산기
설정
프로필
결제
설정
PropTypeDefaultRequiredDescription
CommandInputcomponent-No검색 입력 필드
CommandListcomponent-No결과 목록 컨테이너
CommandEmptycomponent-No결과 없음 메시지
CommandGroupcomponent-No항목 그룹 (heading prop으로 제목 설정)
CommandItemcomponent-No개별 항목 (onSelect, shortcut prop 지원)
CommandSeparatorcomponent-No그룹 간 구분선

단축키

일반
커맨드 팔레트⌘K
사이드바 토글⌘B
도움말⌘/
편집
복사⌘C
붙여넣기⌘V
실행 취소⌘Z

CommandDialog

CommandDialog는 ⌘K (Mac) / Ctrl+K (Windows)로 열고 닫을 수 있습니다.

PropTypeDefaultRequiredDescription
openboolean-No다이얼로그 열림 상태
onOpenChange(open: boolean) => void-No열림 상태 변경 콜백

비활성화 항목

파일
새 파일
파일 열기
저장 (권한 없음)