Resizable

인접한 작업 영역의 크기를 사용자가 직접 조절해야 할 때 사용합니다.

미리보기

목록과 상세 분할

가로 40/60 비율에서 시작하고 목록과 상세 영역에 필요한 최소 공간을 유지합니다.

세부 정보

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/resizable

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

ResizablePanelGroup의 방향을 정하고 패널 사이에 ResizableHandle을 배치하세요. 패널의 초기 크기와 제한을 지정하고 바깥 영역에도 크기를 제공합니다.

"use client";

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";

export default function Example() {
  return (
    <div className="h-48">
      <ResizablePanelGroup orientation="horizontal">
        <ResizablePanel defaultSize="40%" minSize="20%"><div className="p-4">List</div></ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel defaultSize="60%" minSize="20%"><div className="p-4">Details</div></ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

API 레퍼런스

react-resizable-panels의 크기 계산과 separator 접근성을 그대로 사용합니다. 뉴모피즘은 panel 경계와 handle의 표면만 담당하며 패널 상태 계산을 재구현하지 않습니다.

컴포넌트	속성	타입	기본값	설명
`ResizablePanelGroup`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	패널 분할 방향을 지정합니다.
`ResizablePanel`	`defaultSize`	`number \| string`	`—`	초기 패널 크기를 지정합니다.
`ResizablePanel`	`minSize / maxSize`	`number \| string`	`—`	패널이 줄거나 늘어날 수 있는 범위를 제한합니다.
`ResizableHandle`	`withHandle`	`boolean`	`false`	separator 중앙에 시각적 grip을 표시합니다.
`ResizableHandle`	`disabled`	`boolean`	`false`	separator를 표시하되 크기 조절을 비활성화합니다.