응답형 작성을 위한 구성요소 구성

다양한 양식 요소에 대한 응답형 작성으로 페이지를 만들 때 일부 구성 요소 구성 옵션을 조정하면 페이지가 더 작은 크기에서 더 잘 보이고 작동할 수 있는 방법에 대해 알아봅니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

페이지 사용성을 높이는 방법은 중단점에서 다양한 구성을 사용하여 구성요소의 모양과 느낌을 조정하는 것입니다. 구성요소 구성을 사용하는 방법은 셀 수 없이 많습니다. 이 절차에서는 목록 구성요소에 대한 몇 가지 구성 옵션을 편집하여 더 작은 양식 요소에 더 적합하게 만듭니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 경험 생성을 선택하여 작업할 경험을 열거나 경험을 생성합니다 >.
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 응답형 작성으로 페이지를 처음부터 새로 생성합니다.
   페이지를 생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 생성을 참조하세요.
4. 상단에서 데스크톱 폼 요소 아이콘이 선택되어 있는지 확인합니다.
   
5. 스테이지에서 + 콘텐츠 추가를 선택합니다.
6. 레이아웃 탭에서 단일 열을 선택합니다.
7. 새 열 중앙에 있는 + 아이콘을 선택하여 목록 구성요소를 추가합니다.
8. 구성요소 탭에서 목록 구성요소를 찾아 선택합니다.
9. 구성 패널에서 없음 - 구성요소를 수동으로 구성합니다.
10. 바탕 화면 폼 팩터에서 페이지를 봅니다.
    

    상단의 아이콘, 열 수, 하단의 페이지 매김 정보를 포함하여 표시된 요소를 확인합니다.

11. 모바일 폼 팩터 아이콘을 선택합니다.

    

    모바일 양식 요소에서는 목록 구성요소가 혼잡하고 세로 및 가로 스크롤 막대를 모두 포함합니다.

    

    몇 가지 간단한 구성을 변경하여 모바일 폼 팩터의 사용성과 모양을 개선합니다.

12. 콘텐츠 트리에서 목록 1 을 선택합니다.
13. 구성 패널의 구성 탭에서 표시된 열 수 필드를 찾아 1을 입력합니다.
    번호 열만 표시됩니다. 가로 스크롤 막대가 제거되었습니다.
14. 구성 패널의 구성 탭에서 아래로 스크롤하여 헤더 섹션을 다음과 같이 변경합니다.
    1. 크기를작게 변경합니다.
    2. 마지막 새로 고침 정보 숨기기 옵션을 선택합니다.
    3. 목록 작업 숨기기 옵션을 선택합니다.
       
       변경할 때마다 스테이지가 자동으로 업데이트됩니다. 헤더의 크기가 더 작아졌고, 새로 고침 시간이 제거되었으며, 목록 작업 아이콘이 제거되었습니다.
    4. 저장을 선택합니다.
15. 스테이지에서 모바일 뷰의 맨 아래로 스크롤합니다.
16. 구성 패널의 구성 탭에서 아래로 스크롤하여 페이지 매김 섹션을 다음과 같이 변경합니다(필요한 경우 페이지 매김을 선택하여 필드를 확장).
    1. 범위 숨기기 옵션을 선택합니다.
    2. 행 개수 숨기기 옵션을 선택합니다.
    3. 페이지당 행 숨기기 선택기를 선택합니다.
    4. 저장을 선택합니다.
    범위, 행 수 및 페이지당 행 선택기가 제거되었습니다. (행 개수는 모바일 화면 상단에서 계속 사용할 수 있습니다.)

    

    구성 패널에서 편집한 옵션과 필드가 모바일 계단식 아이콘으로 표시됩니다.

17. 옵션이나 필드 옆에 있는 모바일 계단식 아이콘을 선택하여 값이 모바일 양식 요소용인지 확인합니다.
    
18. 상단에 있는 태블릿 및 데스크톱 폼 팩터 아이콘을 선택하여 더 큰 폼 팩터에 변경 사항이 없는지 확인합니다.