탐색과 공개@neumorphism-ui/resizable

Resizable

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

@neumorphism-ui/resizable

Registry JSON

미리보기

세부 정보

설치

npx shadcn@latest add @neumorphism-ui/resizable

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

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

사용법

Import

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

Example

export default function Example() {
  return <ResizablePanelGroup orientation="horizontal" className="h-48 max-w-lg">
    <ResizablePanel defaultSize={40} minSize={25}><div className="grid h-full place-items-center p-4">목록</div></ResizablePanel>
    <ResizableHandle withHandle />
    <ResizablePanel defaultSize={60} minSize={30}><div className="grid h-full place-items-center p-4">세부 정보</div></ResizablePanel>
  </ResizablePanelGroup>;
}

API 레퍼런스

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