가로 레이아웃

가로로 나란히 배열된 보기를 포함하는 섹션을 작성합니다. 보기가 목록에 바인드되면 목록에서 각 항목에 대해 가로 섹션이 반복되며 테이블에 유사한 형식으로 나타납니다.

가로 레이아웃 및 세로 레이아웃 은 사용자 인터페이스를 디자인하는 데 가장 일반적으로 사용되는 보기 중 하나입니다. 가로 및 세로 레이아웃 보기는 함께 사용되어 복합적 사용자 인터페이스를 설계하는 데 사용할 수 있는 대부분의 플로우 레이아웃 기능을 제공합니다.

팁: 일반적으로 UI Toolkit의 가로 레이아웃 및 세로 레이아웃 보기는 접이식 패널과 함께 사용됩니다.

구성 특성

구성에서 보기의 모양, 응답 및 성능 특성과 같은 구성 특성을 설정하거나 수정하십시오.

화면 크기: 특성 이름 옆에 화면 크기 아이콘 이 있는 구성 특성은 각 화면 크기에 대해 다른 값을 가질 수 있습니다. 값을 설정하지 않을 경우 화면 크기는 다음으로 큰 화면 크기 값을 기본값으로 상속합니다.

테마 정의: 테마 정의는 보기를 위해 색상 및 스타일을 지정하고 보기의 모양을 결정합니다. 테마 편집기에서 보기의 룩앤필을 미리볼 수 있습니다. 테마를 참조하십시오.

가로 레이아웃의 모양 구성 특성은 다음 표에 나와 있습니다.

표 1. 가로 레이아웃의 모양 구성 특성
모양 구성 특성	설명	데이터 유형
레이아웃 플로우	보기의 레이아웃: 가로 가로 인라인 스크롤 가로 정확히 맞춤 가로 자동 줄 바꾸기 세로 세로 정확히 맞춤	`String`
가로 맞추기	레이아웃에 있는 보기의 가로 맞추기: 양쪽 맞춤 왼쪽 가운데 오른쪽 참고: 양쪽 맞춤은 가로 인라인 스크롤 및 세로 자동 줄 바꾸기 레이아웃 플로우와 결합하여 잘 작동하지 않습니다. 이 조합을 사용하는 경우 예상 못한 결과가 발생할 수 있습니다.	`String`
세로 맞추기	레이아웃에 있는 보기의 세로 맞추기입니다. 이 특성은 가로 레이아웃 플로우에만 적용됩니다. 맨 위 가운데 맨 아래	`String`
너비	보기의 너비를 지정합니다. 너비는 `px`(픽셀), `%`(백분율) 또는 `em` 단위로 지정할 수 있습니다. 예를 들어, `50px`, `20%`또는 `0.4em`입니다. 단위 유형을 지정하지 않으면 `px`가 사용됩니다.	`String`
높이	보기 높이를 `px`(픽셀) 또는 `em` 단위로 지정합니다. 단위 유형을 지정하지 않으면 `px`가 사용됩니다.	`String`

가로 레이아웃의 응답 구성 특성은 다음 표에 나와 있습니다.

표 2. 가로 레이아웃의 응답 구성 특성
응답 구성 특성	설명	데이터 유형
응답 센서	(선택사항) 이 레이아웃을 포함하는 응답 센서 보기의 ID입니다. 생략된 경우 상위 체인에서 가장 가까운 센서가 사용됩니다.	`Boolean`
동작	섹션이 응답 센서에서 정의된 상자 요인을 기반으로 동작해야 할 방법을 지정합니다. 상자 요인 이름: 이러한 속성이 적용되는 응답 센서 상자 요인의 이름입니다. 하위 레이아웃: 지정된 상자 요인으로 사용할 수 있는 레이아웃입니다. 세로 세로 정확히 맞춤 가로 가로 인라인 스크롤 가로 정확히 맞춤 가로 자동 줄 바꾸기 하위 맞추기: 지정된 상자 요인으로 사용할 수 있는 맞추기입니다. 양쪽 맞춤 왼쪽 가운데 오른쪽 하위 너비: 이 상자 요인으로 사용할 수 있는 하위 보기의 너비입니다 예를 들어, `60%`입니다. 레이아웃에 포함되는 보기에 더 많은 너비를 지정할 수 있습니다 예를 들어, `80%`, `20%`입니다. 가시성: 지정된 상자 요인으로 사용할 수 있는 가시성 설정입니다. 표시 없음 숨김 너비: 지정된 상자 요인으로 사용할 수 있는 섹션 너비입니다. 높이: 지정된 상자 요인으로 사용할 수 있는 섹션 높이입니다. CSS 스타일: 지정된 상자 요인에 적용할 수 있는 CSS 스타일입니다. CSS 클래스: 지정된 상자 요인에 추가할 수 있는 CSS 클래스입니다.	`ResponsiveBehavior[]`

응답 센서 보기에서 수평 레이아웃을 중첩하여 컨텐츠 응답성을 제어할 수도 있습니다.

가로 레이아웃의 성능 구성 특성은 다음 표에 나와 있습니다.

표 3. 가로 레이아웃의 성능 구성 특성
성능 구성 특성	설명	데이터 유형
비동기 로드	대형 데이터 세트의 향상된 UI 환경을 제공합니다(섹션이 로드를 시작하면 전체 행 로드 시간이 느려지는 단점이 있음). 섹션이 목록에 바인드될 경우에만 이 특성이 사용됩니다.	`Boolean`
비동기 일괄처리 크기	비동기 배치에서 동기적으로 로드되는 행의 수를 지정합니다. 동기 및 비동기 로드 성능을 최적화하려면 이 특성을 사용하십시오. 섹션이 목록에 바인드될 경우에만 이 특성이 사용됩니다.	`Integer`

제한사항: 보기 가시성이 표시로 설정되었음에도 불구하고 가로 레이아웃 보기의 레이블이 표시되지 않습니다. 가로 레이아웃 보기의 레이블을 지정하기 위해 패널 보기와 함께 해당 보기를 사용할 수도 있습니다.

예

디자이너에서 컨테이너 보기로 사용할 페이지에 가로 레이아웃 보기를 추가하십시오. 컨테이너 내에 Work Categories, Claim Type및 Elements의 이름을 지정할 수 있는 세 개의 패널 보기를 배치하십시오. 다음과 같이 각 보기의 구성 특성을 설정하십시오.

가로 레이아웃의 경우: 모양아래에서 레이아웃 플로우 를 Horizontal로, 가로 맞추기 를 Justified로, 세로 맞추기 를 Top로, 너비 를 750px로 설정하십시오. 높이를 비워뒤십시오.
Work Categories의 경우: 모양아래에서 색상 스타일 을 Warning로 설정하고 너비 를 350px로 설정하십시오.
Claim Type의 경우: 모양아래에서 색상 스타일 을 Success로 설정하고 너비 를 350px로 설정하십시오.
Elements의 경우: 모양아래에서 색상 스타일 을 Danger로 설정하고 너비 를 350px로 설정하십시오.

런타임 시 결과는 높이 및 너비가 동일하고 가로 섹션 내에서 나란히 배열된 세 개의 패널을 표시합니다. Work Categories 는 Warning의 경우 노란색이고, Claim Type 는 Success의 경우 녹색이며, Elements 는 Danger의 경우 빨간색입니다.

이벤트

이벤트 특성에서 보기에 대한 이벤트 핸들러를 설정하거나 수정하십시오. 사용자가 보기로 상호작용할 때 또는 프로그래밍 방식으로 트리거되도록 이벤트를 설정할 수 있습니다. 이벤트를 정의하고 코딩하는 방법에 대한 정보는 사용자 정의 이벤트를 참조하십시오.

가로 레이아웃에는 다음 유형의 이벤트 핸들러가 있습니다.

On load: 페이지가 로드될 때 활성화됩니다. 예를 들어,
```
me.setWidth("100%");
```
On responsive update: 디바이스의 화면 크기에 따라 섹션의 크기가 조정될 때 활성화됩니다.

특정 이벤트에 따라 JavaScript 로직을 사용하여 보기의 효과를 수정할 수 있습니다. 보기에서 이벤트 사용에 대한 자세한 정보는 사용자 정의 이벤트주제에 있습니다.

메소드

가로 레이아웃에 사용 가능한 메소드는 가로 레이아웃 JavaScript API를 참조하십시오.

추가 자원

Coach 또는 페이지를 작성하는 방법에 대한 정보는 Coach 빌드를 참조하십시오.
표준 특성 (일반, 구성, 위치 지정, 가시성및 HTML 속성) 에 대한 정보는 특성 보기를 참조하십시오.