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>
</>
)
}기본
결과가 없습니다
제안
캘린더
이모지 검색
계산기
설정
프로필
결제
설정
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| CommandInput | component | - | No | 검색 입력 필드 |
| CommandList | component | - | No | 결과 목록 컨테이너 |
| CommandEmpty | component | - | No | 결과 없음 메시지 |
| CommandGroup | component | - | No | 항목 그룹 (heading prop으로 제목 설정) |
| CommandItem | component | - | No | 개별 항목 (onSelect, shortcut prop 지원) |
| CommandSeparator | component | - | No | 그룹 간 구분선 |
단축키
일반
커맨드 팔레트⌘K
사이드바 토글⌘B
도움말⌘/
편집
복사⌘C
붙여넣기⌘V
실행 취소⌘Z
CommandDialog
CommandDialog는 ⌘K (Mac) / Ctrl+K (Windows)로 열고 닫을 수 있습니다.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| open | boolean | - | No | 다이얼로그 열림 상태 |
| onOpenChange | (open: boolean) => void | - | No | 열림 상태 변경 콜백 |
비활성화 항목
파일
새 파일
파일 열기
저장 (권한 없음)