디스플레이
Group 또는 Layout에 추가하는 하위 컴포넌트의 배치 방식을 설정합니다.
사용방법
디스플레이를 설정할 컴포넌트를 선택합니다.
디스플레이를 활성화 합니다.
디스플레이 속성값을 설정합니다.
기능설명
| 모양 | 기능 | 속성 | 의미 |
|---|---|---|---|
디스플레이 | Stack UI | Group 또는 Layout에 하위 컴포넌트가 우측으로 차례로 추가되며, 컴포넌트의 너비보다 하위 컴포넌트의 합이 커지면 줄바꿈 되어 배치 | |
Flex | Stack UI와 같이 하위 컴포넌트가 우측으로 쌓이고 줄바꿈되지 않고 한줄로 배치 Flex참고 | ||
Block | 컴포넌트를 블록으로 만들고, 가로 너비는 상위 컴포넌트 너비만큼 차지하며, 세로는 내용에 따라 결정 | ||
None | 컴포넌트를 화면에서 숨기고 공간도 차지하지 않음 | ||
Flex방향 | Row | 하위 컴포넌트가 왼쪽부터 가로로 정렬 | |
Row-Reverse | 하위 컴포넌트가 오른쪽부터 가로로 정렬 | ||
Column | 하위 컴포넌트가 왼쪽부터 세로로 정렬 | ||
Column-Reverse | 하위 컴포넌트가 오른쪽부터 세로로 정렬 | ||
가로정렬 | 왼쪽 | 하위 컴포넌트가 상위 컴포넌트의 좌측부터 배치 | |
가운데 | 하위 컴포넌트가 상위 컴포넌트의 가운데를 기준으로 배치 | ||
오른쪽 | 하위 컴포넌트가 상위 컴포넌트의 오른쪽부터 배치 | ||
세로정렬 | 상단 | 하위 컴포넌트가 상위 컴포넌트의 상단부터 배치 | |
중앙 | 하위 컴포넌트가 상위 컴포넌트의 중앙을 기준으로 배치 | ||
하단 | 하위 컴포넌트가 상위 컴포넌트의 하단부터 배치 | ||
FlexWrap | 하위 컴포넌트의 너비 또는 높이의 합이 상위 컴포넌트보다 큰 경우 다음 라인에 배치 |
Flex방향이 Column이나 Column-Reverse로 설정된 경우 가로정렬과 세로정렬이 반대로 설정됩니다. 예를 들어 Column이 설정된 경우 가로정렬을 오른쪽으로 설정하면 하위 컴포넌트가 상위 컴포넌트의 상단부터 배치됩니다.
결과예시
예시) 디스플레이를 Flex로 설정한 경우
디스플레이를 Flex로 설정하면 Layout(레이아웃)에 하위 컴포넌트들이 Layout의 너비안에서 공간을 나눠 한줄로 배치됩니다.
이때 Flex방향을 변경하면 아래와 같이 배치됩니다. 방향을 Column으로 선택한 경우 상위 컴포넌트에 높이값을 설정하면 높이안에서 공간을 나눠 세로 배치됩니다.
Last updated
