탐색과 공개@neumorphism-ui/collapsible

Collapsible

추가 설정 한 묶음을 펼치거나 접는 컨테이너. 트리거의 이름은 내용과 관계를 설명해야 합니다. Enter와 Space로 펼침을 확인하세요.

@neumorphism-ui/collapsible

Registry JSON

미리보기

설치

npx shadcn@latest add @neumorphism-ui/collapsible

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

"use client";

import * as React from "react";
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";

Example

export default function Example() {
  const [expanded, setExpanded] = React.useState(false);
  return (<Collapsible open={expanded} onOpenChange={setExpanded}><CollapsibleTrigger>{"세부 설정"}<span aria-hidden="true">{expanded ? "−" : "+"}</span></CollapsibleTrigger><CollapsibleContent><div>{"기본 동작은 그대로 두고 추가 설정만 펼칩니다."}</div></CollapsibleContent></Collapsible>);
}

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Collapsible`	`open / defaultOpen`	`boolean`	`—`	제어 상태 또는 최초 상태를 지정합니다.
`CollapsibleTrigger`	`disabled`	`boolean`	`—`	사용자 조작을 비활성화합니다.
`CollapsibleContent`	`keepMounted`	`boolean`	`—`	접혀 있을 때도 패널을 DOM에 유지합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성