Component

Collapsible

하나의 영역을 독립적으로 접고 펴는 동작 primitive입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { useState } from 'react'

import { Collapsible, CollapsibleTrigger, Button, CollapsibleContent } from '@amineslab/ui'

function CollapsibleExample({ defaultOpen = false, disabled = false } = {}) {
    const [open, setOpen] = useState(defaultOpen);
    return (<Collapsible disabled={disabled} open={open} onOpenChange={setOpen} className="w-full max-w-lg rounded-overlay border border-elevation-700 p-3">
      <div className="flex items-center justify-between gap-3">
        <span className="text-body-2 font-medium">고급 설정</span>
        <CollapsibleTrigger asChild>
          <Button variant="ghost">{open ? '접기' : '펼치기'}</Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="pt-3 text-body-2 text-text-secondary">
        자주 바꾸지 않는 옵션을 여기에 배치합니다.
      </CollapsibleContent>
    </Collapsible>);
}

export default function ExamplePreview() {
  return (<CollapsibleExample key={"false"} {...({"defaultOpen":false,"disabled":false} as const)}/>)
}

Props

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from '@amineslab/ui'

`Collapsible`

단일 영역의 열림 상태를 관리합니다.

Name	Type	Default	Description
`open`	`boolean`	-	controlled 열린 상태입니다.
`defaultOpen`	`boolean`	`false`	초기 열린 상태입니다.
`onOpenChange`	`(open: boolean) => void`	-	열림 상태가 바뀔 때 호출합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

사용 기준

권장하는 사용

공통 열린 상태가 필요한 여러 섹션에는 Accordion을 사용하고, 단일 보조 영역·검색 조건·메뉴 그룹에는 Collapsible을 사용하세요.
Root를 controlled로 쓰면 URL이나 폼 상태와 연결할 수 있습니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Enter / Space: 트리거 영역을 열거나 닫습니다.