Collapse

import { Collapse, CollapseItem } from "@vortex/ui-cals"
 
<Collapse defaultValue={["a"]}>
  <CollapseItem itemKey="a" title="섹션 A">
    섹션 A의 내용입니다.
  </CollapseItem>
  <CollapseItem itemKey="b" title="섹션 B">
    섹션 B의 내용입니다.
  </CollapseItem>
  <CollapseItem itemKey="c" title="섹션 C">
    섹션 C의 내용입니다.
  </CollapseItem>
</Collapse>

<Collapse accordion defaultValue={["a"]}>
  <CollapseItem itemKey="a" title="하나만 열립니다 - A">
    A 내용
  </CollapseItem>
  <CollapseItem itemKey="b" title="하나만 열립니다 - B">
    B 내용
  </CollapseItem>
</Collapse>

const [value, setValue] = useState<string[]>([])
 
<Button onClick={() => setValue(["a", "b"])}>모두 열기</Button>
<Button onClick={() => setValue([])}>모두 닫기</Button>
 
<Collapse value={value} onChange={setValue}>
  <CollapseItem itemKey="a" title="섹션 A">
    외부 버튼으로 자동 열기/닫기가 가능합니다.
  </CollapseItem>
  <CollapseItem itemKey="b" title="섹션 B">
    controlled value로 제어됩니다.
  </CollapseItem>
</Collapse>

<Collapse>
  <CollapseItem itemKey="a" title="화살표 좌측" iconPosition="left">
    아이콘이 제목 왼쪽에 표시됩니다.
  </CollapseItem>
  <CollapseItem itemKey="b" title="화살표 우측 (기본)">
    아이콘이 제목 오른쪽에 표시됩니다.
  </CollapseItem>
</Collapse>

<Collapse>
  <CollapseItem itemKey="a" title="제목 클릭은 무시됩니다" arrowOnly>
    화살표 아이콘을 클릭해야만 토글됩니다.
  </CollapseItem>
</Collapse>

<Collapse>
  <CollapseItem itemKey="a" title="활성 아이템">
    열 수 있습니다.
  </CollapseItem>
  <CollapseItem itemKey="b" title="비활성 아이템" disabled>
    열 수 없습니다.
  </CollapseItem>
</Collapse>