Collapse
콘텐츠를 접거나 열 수 있는 컴포넌트입니다. 헤더는 Enter 또는 Space로 조작할 수 있습니다.
import { Collapse } from 'sud-ui';사용할 때
콘텐츠를 접거나 열 수 있는 경우.
사용자에게 콘텐츠를 접거나 열 수 있는 버튼을 제공할 때.
사용예제
Basic Usage
기본적인 아코디언 컴포넌트입니다.
Disabled
아코디언을 비활성화할 수 있습니다.
Size
아코디언의 크기를 설정할 수 있습니다.
Color Customization
아코디언의 색상을 커스텀할 수 있습니다.
사용 방법
컴포넌트의 props를 설정하는 방법입니다.
| items | 아코디언 아이템 배열 | CollapseItem[] | [] |
| openKeys | 열린 아이템의 key 배열 (제어 컴포넌트) | string[] | - |
| defaultOpenKeys | 기본으로 열린 아이템의 key 배열 (비제어 컴포넌트) | string[] | [] |
| onChange | 아이템 열림/닫힘 시 호출되는 콜백 (openKeys: string[]) => void | (openKeys: string[]) => void | - |
| border | 테두리 표시 여부 | boolean | true |
| borderColor | 테두리 색상(palette값 또는 HEX code) | string | - |
| borderType | 테두리 스타일 | solid | dashed | dotted | double | groove | ridge | inset | outset | none | solid |
| borderWeight | 테두리 두께 | number | 1 |
| headerColorType | 헤더 색상 타입 | default | primary | success | warning | danger | info | red | rose | coral | orange | volcano | apricot | yellow | gold | amber | green | lime | mint | blue | sky | cerulean | indigo | cobalt | navy | purple | plum | orchid | forest | sage | warm-gray | cool-gray | neutral | text | ghost | sub |
| headerBackground | 헤더 배경색(palette값 또는 HEX code) | string | - |
| headerColor | 헤더 텍스트 색상(palette값 또는 HEX code) | string | - |
| contentColorType | 내용 색상 타입 | default | primary | success | warning | danger | info | red | rose | coral | orange | volcano | apricot | yellow | gold | amber | green | lime | mint | blue | sky | cerulean | indigo | cobalt | navy | purple | plum | orchid | forest | sage | warm-gray | cool-gray | neutral | text | ghost | default |
| contentBackground | 내용 배경색(palette값 또는 HEX code) | string | - |
| contentColor | 내용 텍스트 색상(palette값 또는 HEX code) | string | - |
| shadow | 그림자 효과 | none | sm | md | lg | sm |
| disabledKeys | 비활성화된 아이템의 key 배열 | string[] | [] |
| className | 추가 클래스명 | string | "" |
| size | 아코디언 크기 | sm | md | lg | md |
| shape | 아코디언 모양 | square | circle | rounded | capsule | rounded |
| style | 추가 스타일 | React.CSSProperties | {} |