Installation
bash
npx axis-cli add commandUsage
결과가 없습니다.
캘린더
검색
이모지
프로필
계정
키보드 단축키
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
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | 선택된 값 (controlled) |
onValueChange | (value: string) => void | - | 값 변경 콜백 |
filter | (value: string, search: string) => number | - | 커스텀 필터 함수 |
shouldFilter | boolean | true | 자동 필터 활성화 여부 |
loop | boolean | false | 키보드 순환 탐색 여부 |
valueType:
stringDefault:
-선택된 값 (controlled)
onValueChangeType:
(value: string) => voidDefault:
-값 변경 콜백
filterType:
(value: string, search: string) => numberDefault:
-커스텀 필터 함수
shouldFilterType:
booleanDefault:
true자동 필터 활성화 여부
loopType:
booleanDefault:
false키보드 순환 탐색 여부