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

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

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

페이지 사용성을 높이는 방법은 중단점에서 서로 다른 구성을 사용하여 구성요소의 모양과 느낌을 조정하는 것입니다. 구성 요소 구성을 사용하는 방법은 무궁무진합니다. 이 절차에서는 목록 구성 요소에 대한 몇 가지 구성 옵션을 편집하여 더 작은 폼 팩터에 더 적합하도록 합니다.

프로시저

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

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

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

    

    모바일 폼 팩터에서 목록 구성요소는 복잡하며 세로 및 가로 스크롤 막대를 모두 포함합니다.

    

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

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

    

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

17. 옵션 또는 필드 옆에 있는 모바일 계단식 아이콘을 선택하여 값이 모바일 폼 팩터에 대한 값인지 확인합니다.
    
18. 태블릿과 맨 위에 있는 데스크톱 폼 팩터 아이콘을 선택하여 더 큰 폼 팩터가 변경되지 않았는지 확인합니다.