Components/Command

Command

검색 가능한 커맨드 팔레트 컴포넌트입니다. cmdk 기반.

Installation

bash
npx axis-cli add command

Usage

tsx
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from '@axis-ds/ui-react'

export function Example() {
  return (
    <Command className="rounded-lg border shadow-md">
      <CommandInput placeholder="검색..." />
      <CommandList>
        <CommandEmpty>결과가 없습니다.</CommandEmpty>
        <CommandGroup heading="제안">
          <CommandItem>캘린더</CommandItem>
          <CommandItem>검색</CommandItem>
          <CommandItem>이모지</CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="설정">
          <CommandItem>프로필</CommandItem>
          <CommandItem>계정</CommandItem>
          <CommandItem>키보드 단축키</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Components

Command

커맨드 루트 컨테이너

CommandInput

검색 입력 필드

CommandList

아이템 목록 컨테이너

CommandEmpty

검색 결과 없음 표시

CommandGroup

아이템 그룹 (heading 포함)

CommandItem

개별 커맨드 아이템

CommandSeparator

그룹 간 구분선

Props

value
Type:string
Default:-

선택된 값 (controlled)

onValueChange
Type:(value: string) => void
Default:-

값 변경 콜백

filter
Type:(value: string, search: string) => number
Default:-

커스텀 필터 함수

shouldFilter
Type:boolean
Default:true

자동 필터 활성화 여부

loop
Type:boolean
Default:false

키보드 순환 탐색 여부