크기 조절

코드 편집기, 파일 트리, 대시보드 레이아웃을 위한 드래그 가능한 분할 패널 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.

One

Two

Three

import {
  ResizableHandle,
  ResizablePanel,

Resizable은 영역을 사용자가 드래그해 비율을 바꿀 수 있는 패널로 나눕니다. 가로·세로, 중첩 가능, 키보드로 조작 가능한 핸들을 지원합니다. 두 변형 모두 bvaughn의 react-resizable-panels를 감싸며, 네오브루탈리즘 공식(두꺼운 테두리, 선명한 그림자, 굵은 서체)에 맞춰 스타일을 입혔습니다.

다음과 같은 경우에 사용합니다.

코드 에디터·IDE 레이아웃 — 파일 트리, 에디터, 미리보기 창을 원하는 크기로.
마스터–디테일 뷰 — 받은편지함과 스레드, 테이블과 레코드 검사기, 구분선을 사용자가 원하는 위치에.
대시보드·콘솔 — 모달 없이 로그 창이나 터미널이 메인 뷰 높이를 가져가게 합니다.

소개

Resizable 컴포넌트는 bvaughn이 만든 react-resizable-panels를 기반으로 합니다.

설치


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/resizable.json
npx shadcn@latest add https://neobrutalism.com/r/base/resizable.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/resizable.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/resizable.json

다음 의존성을 설치합니다.


pnpm add react-resizable-panels
npm install react-resizable-panels
yarn add react-resizable-panels
bun add react-resizable-panels

다음 코드를 복사해서 프로젝트에 붙여넣습니다.

components/ui/resizable.tsx

"use client"

import * as ResizablePrimitive from "react-resizable-panels"

import { cn } from "@/lib/utils"

function ResizablePanelGroup({
  className,
  ...props
}: ResizablePrimitive.GroupProps) {
  return (
    <ResizablePrimitive.Group
      data-slot="resizable-panel-group"
      className={cn(
        "flex h-full w-full aria-[orientation=vertical]:flex-col",
        className
      )}
      {...props}
    />
  )
}

function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
}

function ResizableHandle({
  withHandle,
  className,
  ...props
}: ResizablePrimitive.SeparatorProps & {
  withHandle?: boolean
}) {
  return (
    <ResizablePrimitive.Separator
      data-slot="resizable-handle"
      className={cn(
        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
        className
      )}
      {...props}
    >
      {withHandle && (
        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
      )}
    </ResizablePrimitive.Separator>
  )
}

export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

import 경로를 프로젝트 구성에 맞게 수정합니다.

사용법

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

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

구성

ResizablePanelGroup을 만들려면 다음 구성을 사용합니다.

ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel

예제

수직

수직 방향의 크기 조절에는 orientation="vertical"을 사용합니다.

Header

Content

import {
  ResizableHandle,
  ResizablePanel,

핸들

ResizableHandle의 withHandle prop을 사용해서 눈에 보이는 핸들을 표시합니다.

Sidebar

Content

import {
  ResizableHandle,
  ResizablePanel,

RTL

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

واحد

اثنان

ثلاثة

"use client"

import * as React from "react"

핸들은 WAI-ARIA Window Splitter 패턴을 따릅니다. react-resizable-panels는 각 핸들을 포커스 가능한 role="separator"로 렌더링하고, aria-valuenow / aria-valuemin / aria-valuemax와 리사이즈하는 패널을 가리키는 aria-controls를 두어 스크린 리더가 분할 위치 변화를 읽게 합니다.

키보드 상호작용:

키	동작
`Tab` / `Shift + Tab`	리사이즈 핸들로 포커스 이동/이탈
`ArrowLeft` / `ArrowRight`	가로 그룹을 한 단계 리사이즈
`ArrowUp` / `ArrowDown`	세로 그룹을 한 단계 리사이즈
`Home`	핸들 앞 패널을 최소 크기로 줄이기
`End`	핸들 앞 패널을 최대 크기로 키우기
`Enter`	접을 수 있는 패널의 접힘/펼침 전환

v3	v4
`PanelGroup`	`Group`
`PanelResizeHandle`	`Separator`
`direction` prop	`orientation` prop
`defaultSize={50}`	`defaultSize="50%"`
`onLayout`	`onLayoutChange`
`ImperativePanelHandle`	`PanelImperativeHandle`
`ref` prop on Panel	`panelRef` prop
`data-panel-group-direction`	`aria-orientation`

Neobrutalism 래퍼 컴포넌트(ResizablePanelGroup, ResizablePanel, ResizableHandle)는 변경되지 않습니다.

크기 조절

소개

설치

다음 의존성을 설치합니다.

다음 코드를 복사해서 프로젝트에 붙여넣습니다.

import 경로를 프로젝트 구성에 맞게 수정합니다.

사용법

구성

예제

수직

핸들

RTL

접근성

API 참조

변경 로그

2025-02-02 `react-resizable-panels` v4