Command

1. CommandGroup

Props

Prop	Type	Default	Description
heading	boolean	-	Heading 노출 여부
headingText	string | React.ReactNode	-	Heading 텍스트
button	boolean	-	버튼 노출 여부
buttonText	string	-	버튼 텍스트
buttonClick	function	-	버튼 클릭 이벤트 핸들러
variant	'default' | 'select' | 'checkbox' | 'toggle'	-	타입
className	string	-	커스텀 스타일 적용
items	{ value: string label: string description: string disabled: boolean checked: boolean selected: boolean active: boolean }[]	-	그룹 아이템 value: 선택 값 label: 라벨 텍스트 description: 상세 설명 disabled: 비활성화 여부 checked: 체크 여부 selected: 선택 여부 active: 활성화 여부
onItemSelect	function	-	아이템 선택 이벤트 핸들러
accentColor	string	-	강조 색상
hoverColor	string	-	hover 색상
icon	React.ReactNode	-	라벨 아이콘

Usage

<CommandGroup
  heading={true}
  headingText={'Heading'}
  button={true}
  buttonText={'적용'}
  buttonClick={() => {}}
  variant={'select'}
  items={[
    {
      value: 'item01',
      label: 'Command Item',
    },
    {
      value: 'item02',
      label: 'Command Item',
    }
  ]}
  onItemSelect={() => {}}
/>

---

2. CommandItemBase

Props

Prop	Type	Default	Description
value	string	-	선택 값
label	string	-	라벨 텍스트
icon	React.ReactNode	-	라벨 아이콘
description	string	-	상세 설명
disabled	boolean	-	비활성화 여부
onSelect	function	-	아이템 선택 이벤트 핸들러
className	string	-	커스텀 스타일 적용
accentColor	string	-	강조 색상
hoverColor	string	-	hover 색상

Usage

<CommandItemBase
  value={'item01'}
  label={'Command Item'}
  icon={<Calendar16Regular />}  
/>