Splitter

영역을 나누고 경계선을 끌어 각 패널의 크기를 조절하는 컴포넌트입니다.

import { Splitter } from 'sud-ui';

사용할 때

사이드바와 본문처럼 사용자가 너비를 직접 조절해야 할 때

보조 패널을 접고 펼쳐 작업 공간을 넓혀야 할 때

사용예제

First

Second

Basic

경계선을 끌거나 경계선에 포커스한 뒤 방향키로 크기를 바꿉니다. 크기를 지정하지 않은 패널은 남은 공간을 채웁니다.

Side

Main

Detail

Min, Max & Collapsible

min, max는 px 숫자나 "30%" 같은 비율을 받습니다. collapsible 패널은 경계선에 마우스를 올리면 접기·펼치기 버튼이 나타나고, 경계선에서 Enter로도 전환됩니다.

import { Splitter } from "sud-ui";

export default function Example() {
  return (
    <div style={{ height: 200 }}>
      <Splitter draggerIcon={<span>⋮</span>}>
        <Splitter.Panel defaultSize={140} min={80} max="40%" collapsible>
          Side
        </Splitter.Panel>
        <Splitter.Panel min="30%">Main</Splitter.Panel>
        <Splitter.Panel defaultSize={140} collapsible={{ start: true }}>
          Detail
        </Splitter.Panel>
      </Splitter>
    </div>
  );
}

Top

Bottom

Vertical

layout="vertical"이면 위아래로 나눕니다. 다른 Splitter 안에 넣어 복잡한 레이아웃을 만들 수 있습니다.

240px

Main

Controlled

size를 넘기면 제어 모드가 됩니다. onResize가 모든 패널의 px 크기 배열을 알려 주므로 그대로 상태에 저장하면 됩니다.

import { useState } from "react";
import { Splitter } from "sud-ui";

export default function Example() {
  const [sizes, setSizes] = useState([240, 0]);

  return (
    <div style={{ height: 200 }}>
      <Splitter onResize={setSizes}>
        <Splitter.Panel size={sizes[0]} min={120} max="70%">
          {Math.round(sizes[0])}px
        </Splitter.Panel>
        <Splitter.Panel>Main</Splitter.Panel>
      </Splitter>
    </div>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

layout

분할 방향

horizontal

|

vertical

horizontal

onResizeStart

드래그를 시작할 때 호출

(sizes: number[]) => void

-

onResize

크기가 바뀌는 동안 호출 (모든 패널의 px 크기)

(sizes: number[]) => void

-

onResizeEnd

드래그나 키보드 조작이 끝났을 때 호출

(sizes: number[]) => void

-

onCollapse

패널을 접거나 펼쳤을 때 호출

(collapsed: boolean[], sizes: number[]) => void

-

barSize

보이는 경계선 두께(px)

number

1

triggerSize

드래그할 수 있는 영역 두께(px)

number

16

barColor

경계선 색상 (테마 토큰 또는 CSS 색상)

string

neutral-3

activeColor

마우스를 올리거나 끌 때의 경계선 색상

string

blue-6

iconColor

드래그·접기 아이콘 색상

string

neutral-6

iconActiveColor

마우스를 올렸을 때 아이콘 색상

string

activeColor

draggerIcon

경계선 가운데에 표시할 아이콘

ReactNode

-

collapsibleIcon

접기·펼치기 버튼 아이콘

{ start?: ReactNode; end?: ReactNode }

화살표

keyboardStep

방향키 한 번에 움직이는 px (Shift는 5배)

number

10

collapseLabels

접기·펼치기 버튼의 접근성 이름

{ collapse?: string; expand?: string }

Collapse panel / Expand panel

classNames

내부 요소별 클래스

{ panel?, bar?, collapse?, dragger?: string | { default?, active? } }

-

Splitter.Panel

size

제어 크기 (onResize·onCollapse에서 갱신)

number | string

-

defaultSize

비제어 패널의 처음 크기

number | string

남은 공간

min

최소 크기 (px 또는 %)

number | string

0

max

최대 크기 (px 또는 %)

number | string

100%

resizable

양옆 경계선으로 크기를 바꿀 수 있는지

boolean

true

collapsible

접기 허용. start는 앞쪽 경계선, end는 뒤쪽 경계선에서 접습니다. showCollapsibleIcon이 "auto"면 마우스를 올렸을 때만 버튼이 보입니다.

boolean | { start?, end?, showCollapsibleIcon?: boolean | "auto" }

false

className / style

패널 요소의 클래스와 스타일

string / CSSProperties

-

Soon UI Design

Splitter

사용할 때

사용예제

사용 방법

개인정보 처리방침

서비스 약관