응답형 작성
응답형 작성을 사용하여 데스크톱, 태블릿, 모바일과 같은 다양한 양식 요소(크기)에 맞게 원활하게 조정되는 페이지를 만듭니다 UI 빌더 .
의 응답형 작성 UI 빌더
응답형 작성을 사용하면 보기에 좋고 모든 양식 요소에서 제대로 작동하는 페이지를 만들 수 있으므로 사용자가 콘텐츠와 더 쉽게 상호 작용할 수 있습니다. 예를 들어 랩톱에서 볼 때 3개의 열이 포함된 페이지는 작은 화면에 대해 단일 열로 조정될 수 있습니다.
UI 빌더 는 현재 세 가지 기본 폼 팩터를 제공합니다.
- 데스크톱(1281픽셀에서 무한대까지)
- 태블릿(1280픽셀 이하)
- 모바일(500픽셀에서 0픽셀로)
이러한 양식 요소 외에도 최대 3개의 추가 사용자 지정 중단점(너비)을 만들 수 있습니다. 자세한 내용은 응답형 작성을 위한 중단점 만들기 문서를 참조하십시오.
응답형 작성 및 리플로우
Xanadu Store 릴리스 1부터 응답형 작성은 페이지를 처음부터 생성할 UI 빌더 때만 사용할 수 있습니다. 응답형 작성은 기존 페이지 또는 템플릿으로 만든 페이지에는 사용할 수 없습니다. 이러한 유형의 페이지는 기존의 기본 리플로우 모델을 계속 사용하여 다양한 화면 너비에 맞게 페이지를 조정합니다.
리플로우는 사용자가 브라우저 확대/축소 비율을 400%로 늘릴 때 콘텐츠나 기능의 손실 없이 페이지 레이아웃을 자동으로 세로 스택 뷰로 변환합니다. 이 조정은 시력이 나쁜 사용자나 모니터 크기, 장치 유형, 어두운 조명 또는 기타 상황으로 인해 브라우저에서 웹 콘텐츠를 보는 데 문제가 있는 사용자에게 도움이 됩니다.
템플릿을 사용하여 또는 처음부터 생성된 모든 기존 페이지는 자동으로 리플로우를 사용합니다. 이제 에서 페이지를 처음부터 UI 빌더새로 만들 때 추가 단계를 통해 응답형 작성이 기본적으로 선택되어 있음을 알 수 있습니다. 응답형 없이 빌드를 선택하여 리플로우를 대신 사용하도록 선택할 수 있지만 응답형 작성 옵션을 사용하면 페이지 작동 방식을 더 잘 제어하고 다양한 양식 요소를 볼 수 있습니다. 에서 UI 빌더페이지를 생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 생성 단원을 참조하십시오.
리플로우에 대한 자세한 내용은 다음 문서를 참조하십시오 Reflow for Configurable Workspace.
리플로우를 지원하는 구성요소 목록은 UI 빌더넥스트 경험 구성요소 릴리스 정보의리플로우 지원 섹션을 참조하십시오.
변경 사항 적용 및 계단식
폼 팩터에 대한 모든 변경 사항은 모든 작은 폼 팩터에 자동으로 적용됩니다. 예를 들어 태블릿에 대한 변경 사항은 태블릿과 모바일 모두에 적용됩니다. 그러나 그런 다음 모바일 폼 팩터를 변경하면 태블릿 폼 팩터의 계단식 설정이 무효화됩니다. 이 계단식 기능을 사용하면 페이지가 잘 보이고 잘 작동하도록 각각의 작은 폼 팩터에 대해 특정한 변경을 수행할 수 있습니다.
응답형 작성 및 컨트롤러
페이지에 컨트롤러를 추가하는 경우 컨트롤러 속성은 전역적이며 양식 요소별로 설정할 수 없습니다. 컨트롤러에 대한 자세한 내용은 다음 문서를 참조하십시오 컨트롤러를 사용하여 페이지에 데이터 UI 빌더 바인딩(고급 기능).
페이지를 만들 때 응답형 작성 사용
페이지를 빌드할 때 맞춤형 디자인을 생성하여 다양한 폼 팩터의 모양과 느낌을 제어할 수 있습니다.
기본적으로 스테이지에서는 데스크톱용 페이지를 만듭니다(1281픽셀에서 무한대까지). 언제든지 다른 아이콘을 선택하여 태블릿이나 모바일과 같은 다른 폼 팩터에서 스테이지의 페이지를 볼 수 있습니다. 필요한 경우 새 양식 요소에 적절하게 표시되도록 페이지를 편집합니다.
다음은 데스크톱 폼 팩터에서 샘플 페이지가 나타나는 모습입니다.
다음은 태블릿 폼 팩터에 대해 사용자 지정된 동일한 페이지입니다.
태블릿의 경우 제목 및 이미지 구성요소의 크기가 축소되었습니다. 단순 목록 구성요소 구성을 편집하여 6개 대신 4개의 열을 표시했으며 최대 행 수를 5개로 설정했습니다. 양식 요소의 구성요소를 편집할 때 변경된 필드는 해당 양식 요소(이 경우 태블릿)에 대한 계단식 아이콘으로 표시됩니다. 이 아이콘을 사용하면 지정된 페이지의 양식 요소 간의 차이를 쉽게 확인할 수 있습니다.
다음은 모바일 폼 팩터에 대해 사용자 지정된 동일한 페이지입니다.
제목의 단어 수가 줄어들고 이미지 구성요소가 숨겨졌습니다. 단순 목록 구성요소 구성을 편집하여 4열이 아닌 2개의 열을 표시했으며 "모두 보기" 바닥글 옵션을 숨기는 옵션이 선택되었습니다. 모바일용으로 특별히 사용자 지정된 두 필드 옆에는 모바일 계단식 아이콘이 있습니다. 최대 행 수 필드는 태블릿 설정을 상속하고 모바일용으로 사용자 지정되지 않았기 때문에 태블릿 계단식 아이콘을 계속 유지합니다.
편집기 뷰의 기본 폼 팩터 외에도 언제든지 픽셀 필드에 숫자를 수동으로 입력할 수 있습니다. 스테이지는 범위에 따라 가장 가까운 폼 팩터로 조정됩니다. 예를 들어 850픽셀을 입력하면 범위가 1,280픽셀에서 501픽셀로 정의되므로 태블릿에 맞게 스테이지가 조정됩니다.
