Panes

하나의 박스를 여러 영역으로 나누고 그 사이마다 끌 수 있는 바를 둡니다. 파일 목록 옆의 편집기, 폼 옆의 미리보기처럼 비율을 읽는 사람이 정하는 분할에 씁니다.

import { Pane, Panes } from 'neba';

<Panes>
  <Pane defaultSize="240px" minSize="160px">
    Files
  </Pane>
  <Pane>Editor</Pane>
</Panes>;

Panes는 자신이 놓인 박스를 채우므로, 그 박스에 높이를 주어야 합니다.

Props

Panes

Prop	타입	기본값	설명
orientation공통	'horizontal' | 'vertical'	'horizontal'	pane들이 놓이는 방향. horizontal은 좌우로 늘어놓고 그 사이에 세로 바를, vertical은 위아래로 쌓고 가로 바를 둡니다
resizable	boolean	true	pane 사이의 바를 끌 수 있는지. 컨트롤이 아니라 레이아웃으로 쓸 분할이라면 끕니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	바의 두께이자 포인터가 맞춰야 할 과녁의 폭. 보이는 것은 1px 선이지만 잡을 수 있는 폭은 그보다 넓습니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	바가 켜질 때의 색 계열. Panes는 시트를 그리지 않으므로 색은 선과 포커스 링에만 나타납니다
onResize	(sizes: number[]) => void	—	끄는 동안 모든 pane의 비율(%)을 알려줍니다
onResizeEnd	(sizes: number[]) => void	—	바를 놓았을 때 같은 모양으로 한 번
children	ReactNode	—	Pane들. 크기 제약은 자식의 props에서 읽으므로 직접 자식이 Pane이어야 합니다. 무언가로 감싼 Pane은 최소 크기가 없는 pane이 됩니다

나머지 <div> 속성은 그대로 전달됩니다. 직접 자식은 Pane이어야 합니다. 크기 제약을 그 props에서 읽기 때문입니다. 공용 축은 prop 규약에 있습니다.

Pane

Prop	타입	기본값	설명
defaultSize	number | string	—	처음 차지할 몫. 숫자는 퍼센트, 문자열은 길이(240px, 15rem, 20%)입니다. 값을 주지 않은 pane들은 남은 자리를 똑같이 나눠 갖습니다
minSize	number | string	0	얼마까지 줄일 수 있는지. 이웃 pane의 최대치이기도 합니다
maxSize	number | string	—	얼마까지 키울 수 있는지. 생략하면 제한이 없습니다
children	ReactNode	—	pane 안에 들어가는 것. Pane 자체는 시트를 그리지 않으므로, 표면이 필요하면 안에 Box나 Card를 넣습니다

나머지 <div> 속성은 그대로 전달됩니다.

예시

orientation

horizontal은 pane들을 좌우로 늘어놓고 그 사이에 세로 바를, vertical은 위아래로 쌓고 가로 바를 둡니다. 바는 언제나 pane들이 놓인 축을 가로지릅니다.

import { Pane, Panes, Typography } from 'neba';

export default function PanesOrientation() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 lg:grid-cols-2">
      <div className="h-40">
        <Panes orientation="horizontal">
          <Pane className="p-3">
            <Typography color="secondary">horizontal, one</Typography>
          </Pane>
          <Pane className="p-3">
            <Typography color="secondary">two</Typography>
          </Pane>
        </Panes>
      </div>

      <div className="h-40">
        <Panes orientation="vertical">
          <Pane className="p-3">
            <Typography color="secondary">vertical, one</Typography>
          </Pane>
          <Pane className="p-3">
            <Typography color="secondary">two</Typography>
          </Pane>
        </Panes>
      </div>
    </div>
  );
}

defaultSize · minSize · maxSize

셋 다 숫자(퍼센트로 읽습니다)나 CSS 길이('240px', '15rem', '20%')를 받습니다. defaultSize가 없는 pane들은 남은 자리를 똑같이 나눠 갖습니다. 어떤 pane의 minSize는 이웃 pane의 최대치이기도 하므로, 끌기는 먼저 닿는 한계에서 멈춥니다.

onResize는 바가 움직이는 동안 모든 pane의 비율(%)을 알려주고, onResizeEnd는 바를 놓았을 때 한 번 호출됩니다.

import { useState } from 'react';
import { Pane, Panes, Typography } from 'neba';

export default function PanesSizing() {
  const [sizes, setSizes] = useState<number[]>([]);

  return (
    <div className="flex w-full flex-col gap-2">
      <div className="h-40">
        <Panes onResize={setSizes}>
          <Pane defaultSize="180px" minSize="120px" maxSize="50%" className="p-3">
            <Typography color="secondary">180px to start, never under 120</Typography>
          </Pane>
          <Pane minSize={20} className="p-3">
            <Typography color="secondary">at least a fifth</Typography>
          </Pane>
        </Panes>
      </div>
      <Typography level="caption" color="secondary">
        {sizes.length ? sizes.map((size) => `${Math.round(size)}%`).join(' · ') : 'Drag the bar.'}
      </Typography>
    </div>
  );
}

중첩

Pane 안의 Panes는 분할 안의 분할이며, 세 영역짜리 레이아웃은 이렇게 만듭니다. 안쪽에는 반대 orientation을 주세요.

<Panes>
  <Pane defaultSize="240px">Files</Pane>
  <Pane>
    <Panes orientation="vertical">
      <Pane defaultSize={70}>Editor</Pane>
      <Pane>Terminal</Pane>
    </Panes>
  </Pane>
</Panes>

resizable

resizable={false}는 바를 pane 사이의 선으로만 남깁니다. 그려지기는 하지만 끌 수 없고 tab 순서에서도 빠집니다.

import { Pane, Panes, Typography } from 'neba';

/* `resizable={false}` leaves the split as a layout: the bar is still drawn as a
   rule between the panes, but it is not something to grab. */
export default function PanesFixed() {
  return (
    <div className="h-40 w-full">
      <Panes resizable={false}>
        <Pane defaultSize={30} className="p-3">
          <Typography color="secondary">Fixed at 30%</Typography>
        </Pane>
        <Pane className="p-3">
          <Typography color="secondary">The rest</Typography>
        </Pane>
      </Panes>
    </div>
  );
}

접근성

• 각 바는 separator이며, 앞에 있는 pane의 비율(%)을 aria-valuenow로 실어 나릅니다.
• 바는 focus를 받습니다. 세로 바는 ArrowLeft·ArrowRight로, 가로 바는 ArrowUp·ArrowDown으로 움직입니다.
• aria-orientation은 pane이 아니라 바를 설명합니다. 좌우로 놓인 pane 사이의 세로 바는 vertical입니다.
• RTL에서도 끌기는 포인터가 간 방향으로 경계를 옮깁니다.