Splitter

한눈에#

2패널을 드래그로 리사이즈하는 분할 컨테이너입니다 — 구분선이 role="separator" + aria-valuenow(0~100)를 보고하고 키보드·더블클릭 리셋을 지원합니다.

정확히 2개의 자식을 받습니다 — 첫 자식이 비율(flex-basis %)을 차지하고 두 번째 자식이 나머지를 채웁니다. 구분선 핸들 점은 hover/active/focus에서 color.primary로 강조됩니다.

사용 시점#

사용자가 드래그로 두 패널의 비율을 조절하면 Splitter — 조절 없는 고정 구분이나 한 번에 한 뷰는 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { Splitter } from '@wds/ui-web';

<Splitter><div>좌측 패널</div>
  <div>우측 패널</div></Splitter>

변형#

direction이 변형 축입니다 — 'horizontal'(기본)은 좌/우, 'vertical'은 상/하 패널입니다. minSize(px)로 각 패널의 최소 크기를 클램프하고, defaultRatio로 첫 패널의 초기 비율(0~1)을 지정합니다.

크기#

루트는 폭 100%이고 높이는 콘텐츠/소비자가 결정합니다 — 데모는 인라인 height로 영역을 줬습니다. 구분선은 시각 8px(space.2) 트랙에 중앙 2px 라인이고, 히트 영역은 44px로 확장돼 터치 타깃을 채웁니다. minSize는 컨테이너 진행 축 크기를 비율 경계로 환산해 양쪽 끝에서 50%까지만 허용합니다.

상태#

• Default — 구분선 라인 color.border, 핸들 점 color.border-strong
• Hover / Active / Focus — 라인·핸들 점 모두 color.primary로 강조
• Focus — :focus-visible에 color.primary 2px 아웃라인 + radius.sm
• Dragging — 패널 텍스트 선택 방지(user-select: none)

Props#

접근성#

구분선이 role="separator" + tabIndex=0이고 aria-valuenow(0~100, 첫 패널 비율%)·aria-valuemin/max를 보고합니다. aria-orientation은 구분선 자체의 방향이라 좌우 패널을 가르는 세로 막대는 'vertical'을 보고합니다(ARIA 명세).

• 포인터 드래그는 setPointerCapture 기반이고 핸들 점은 aria-hidden(포인터 보조 경로)입니다
• 핸들 강조·라인 전환은 background/color만 사용해 prefers-reduced-motion에서 전환을 끕니다

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).