Resizable

Sidebar

Main

계약

Overview

Machine-readable contract from Component Spec.

component: resizableexport: Resizableversion: 1attributes: data-refineui=resizable-panel-group

Anatomy

Part	data-refineui
root	resizable-panel-group
resizable_handle	resizable-handle
resizable_panel	resizable-panel

Variants

Axis	Values
orientation	horizontal, vertical

Accessibility

Slot	Element	Role
resizable-handle	div	separator

Keyboard

Key	Action	Native
Home	first-trigger	—
End	last-trigger	—

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@refineui/react";

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize={50} minSize={30}>
    Left panel
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50} minSize={30}>
    Right panel
  </ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup orientation="vertical" onLayout={(sizes) => console.log(sizes)}>
  <ResizablePanel size={topPanelSize} onResize={setTopPanelSize}>
    Top
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel>
    Bottom
  </ResizablePanel>
</ResizablePanelGroup>

API 레퍼런스

ResizablePanelGroup

Prop	Default	Type	Description
orientation	"horizontal"	"horizontal" | "vertical"	분할 방향.
onLayout	—	(sizes: number[]) => void	리사이즈 후 패널 크기(합이 약 100%인 백분율)로 호출됩니다.

ResizablePanel

Prop	Default	Type	Description
defaultSize	50	number	초기 크기(백분율).
minSize	10	number	최소 크기 백분율.
maxSize	100	number	최대 크기 백분율.
size	—	number	제어형 크기 백분율.
onResize	—	(size: number) => void	패널 리사이즈 시 이벤트 핸들러.

ResizableHandle

Prop	Default	Type	Description
withHandle	false	boolean	구분선에 grip affordance를 표시합니다.
disabled	false	boolean	리사이즈를 비활성화합니다.