디스플레이

Group 또는 Layout에 추가하는 하위 컴포넌트의 배치 방식을 설정합니다.

사용방법

  1. 디스플레이를 설정할 컴포넌트를 선택합니다.

  2. 디스플레이를 활성화 합니다.

  3. 디스플레이 속성값을 설정합니다.

기능설명

모양기능속성의미

디스플레이

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