리사이저블

리사이저블 (Resizable)

접근 가능한 리사이즈 패널 그룹과 레이아웃을 지원하는 컴포넌트로, 키보드 지원도 포함돼요. 화면을 여러 패널로 나누고 사용자가 패널 사이의 경계를 드래그해서 크기를 조절할 수 있게 해 줘요. 분할 화면처럼 영역을 자유롭게 조정해야 하는 레이아웃에서 사용해요.

출처: 문서

본문

소개

Resizable 컴포넌트는 bvaughn이 만든 react-resizable-panels 위에 만들어져 있어요.

설치하기

CLI Manual 
npx shadcn@latest add resizable

다음 의존성을 설치해 주세요.

npm install react-resizable-panels

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

팬 컴포넌트를 import 하고,

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

다음 구조로 조립하면 돼요. ResizablePanelGroup 안에 ResizablePanel을 배치하고, 패널 사이에 ResizableHandle을 넣으면 그 경계를 드래그해서 크기를 조절할 수 있어요.

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

예시

세로 방향

direction prop으로 리사이즈 패널의 방향을 정할 수 있어요. vertical로 주면 패널이 세로로 쌓여요.

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

export default function Example() {
  return (
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  )
}

핸들

ResizableHandle 컴포넌트의 withHandle prop을 사용하면 핸들의 표시 여부를 정할 수 있어요. withHandle을 주면 핸들 아이콘이 함께 나타나요.

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

export default function Example() {
  return (
    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  )
}

더 알아보기 (Learn more)