손잡이는 쉴 때 헤어라인 1px 하나입니다. 손을 올리면 선이 2px 로 굵어지고 작은 키캡이 나타나며, 잡으면 primary 선 + 키캡이 두께만큼 가라앉고 앞 칸의 폭(px)이 뜹니다. 끌기 · 접기 · 저장은 react-resizable-panels 가 하고(W3 결정 #17), 손잡이 모양 · 이름 · 키보드는 이 컴포넌트가 맞춥니다. 이 서브패스만 react-resizable-panels 를 peer 로 가져옵니다.

import

import { SplitPanel, SplitPane, SplitHandle } from "@uyoolabs/ui/split";

쓰는 경우

lg(1024) 이상에서 두 칸 이상을 나란히 보며 폭을 사람이 정해야 할 때 씁니다. 칸마다 최소 · 최대를 주고, 끝 칸(상세 · 대화)은 maxSize 를 100% 로 둬 이웃 칸이 접힐 자리를 줍니다.

쓰지 않는 경우

lg 미만에서 쓰지 않습니다(collapseBelow 의 data-narrow 를 받아 한 칸 + 뒤로 가기로 바꿉니다). 칸 경계 전체에 포커스 링을 두르지 않습니다. 넷 이상의 칸으로 나누지 않습니다. 고정 폭이면 되는 사이드바에 쓰지 않습니다(AppShell).

값

sizes · defaultSizes · onSizeChange · onSizeCommit 은 % 이고 합이 100 입니다. 접힌 칸은 0 입니다. 끄는 동안은 onSizeChange, 놓았을 때와 키보드 한 번에 onSizeCommit 을 한 번 부릅니다. 창 크기가 바뀌면 px 최소값을 지키도록 다시 나눕니다.

접근성

APG Window Splitter. 손잡이는 role=separator · aria-valuenow(앞 칸 %) · aria-controls(앞 칸) 이고, 칸은 label 을 이름으로 갖는 영역(region)입니다. 끄는 동안의 폭 표시는 시각 전용입니다.