VSplit
VSplit(세로 분할) 위젯은 화면을 세로 방향으로 여러 개의 영역으로 나누고, 영역 사이의 분할선으로 각 영역의 크기를 조절할 수 있는 배치 위젯입니다.
화면을 여러 구역으로 구성할 때 사용합니다.
정보
이 위젯은 Free 플랜에서 잠겨 있으며, Pro·Enterprise 플랜에서 사용할 수 있습니다.
정의 / 역할
VSplit 위젯은 자신의 영역을 세로 방향으로 여러 개의 분할 영역(SplitItem)으로 나눕니다. 각 영역에는 다른 위젯을 배치할 수 있고, 영역 사이에는 분할선이 그려집니다. 분할선의 표시 여부·두께·색·여백·모서리 둥글기를 설정할 수 있으며, 분할선 고정을 끄면 분할선을 드래그해 인접한 두 영역의 크기를 실시간으로 조절할 수 있습니다.
- 카테고리: Layouts
- 기본 분할 영역 수:
2 - 기본 분할선: 두께
10, 흰색, 항상 표시, 고정(드래그 불가)
기능
| 기능 | 설명 |
|---|---|
| 세로 분할 | 화면을 세로 방향으로 itemCount(2~99)개의 영역으로 나눕니다. |
| 영역별 위젯 배치 | 각 분할 영역(SplitItem) 안에 개별 위젯을 끌어다 놓아 구성합니다. |
| 초기 크기 비율 | 각 영역의 초기 크기 비율을 splitItem{N}Flex 값으로 지정합니다. (예: 2와 1 → 2:1 비율) |
| 드래그 크기 조절 | 분할선 고정(isFixedDivider)을 끄면 분할선을 드래그해 인접한 두 영역의 크기를 실시간으로 조절합니다. |
| 분할선 스타일 | 분할선의 표시 여부·두께·색·여백(시작/끝)·모서리 둥글기를 설정합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Layouts 카테고리를 엽니다.
- VSplit 항목을 캔버스로 끌어다 놓습니다.
- 오른쪽 속성 패널에서
itemCount로 분할할 영역 수를 지정합니다. - 각 분할 영역(SplitItem) 안에 배치할 위젯을 끌어다 놓습니다.
- 필요하면
splitItem{N}Flex로 초기 비율을, 분할선 관련 속성으로 모양을 조정합니다. 분할선을 드래그로 조절하려면isFixedDivider를 끕니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
itemCount | 분할할 영역 수 | 2 | 정수 (2~99) |
isShowDivider | 분할선 표시 여부 | 참(표시) | 참 / 거짓 |
isFixedDivider | 분할선 고정 여부 (끄면 드래그로 크기 조절 가능) | 참(고정) | 참 / 거짓 |
dividerThickness | 분할선 두께 | 10 | 숫자 |
dividerIndent | 분할선 시작 쪽 여백 | 0 | 숫자 |
dividerEndIndent | 분할선 끝 쪽 여백 | 0 | 숫자 |
dividerColor | 분할선 색 | 흰색 (#FFFFFF) | 색상 |
dividerBorderRadius | 분할선 모서리 둥글기 | 0 | 숫자 |
splitItem{N}Flex | 각 영역의 초기 크기 비율 (영역 수만큼 자동 생성) | 1 | 정수 (1~1000) |
주의 / 팁
경고
기본값에서는 분할선이 고정(isFixedDivider = 참)되어 있어 드래그로 크기를 조절할 수 없습니다. 드래그 조절이 필요하면 isFixedDivider를 꺼야 합니다.
팁
각 영역의 초기 크기는 splitItem{N}Flex 값의 비율로 정해집니다. 예를 들어 두 영역을 2:1로 나누려면 두 영역의 flex를 각각 2와 1로 지정합니다. 위젯은 각 분할 영역(SplitItem) 안에만 배치할 수 있습니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 VSplit (세로 분할) Widget Control 문서에서 확인하세요.