응답 작성에서 구성요소 가시성 조정
다양한 양식 요소에 대한 응답형 작성으로 페이지를 만들 때 모바일 크기에서 이미지를 숨기는 단계를 완료하여 구성요소를 표시하거나 숨기는 방법에 대해 알아보십시오.
시작하기 전에
필요한 역할: ui_builder_admin
이 태스크 정보
페이지 사용성을 높이는 방법은 구성요소를 숨기거나 중단점에 다른 구성요소를 표시하는 것입니다. 구성요소 가시성을 사용하는 방법은 셀 수 없이 많지만 몇 가지 예는 다음과 같습니다.
- 데스크톱 및 태블릿 크기의 경우 페이지 상단에 여러 개의 버튼 구성요소를 가로로 사용하지만, 모바일 크기에서는 버튼을 숨기고 드롭다운 구성요소를 표시합니다.
- 모바일 크기의 경우 더 작은 버튼 크기를 사용하되 사용자가 엄지손가락으로 누를 수 있을 만큼 버튼이 큰지 확인하십시오. 모바일용 버튼 배치도 변경하는 것이 좋습니다.
- 데스크톱 및 태블릿 페이지에서는 이미지를 사용하되 모바일에서는 이미지, 특히 큰 이미지를 숨깁니다.
이 절차에서는 데스크톱 및 태블릿 폼 팩터의 상단에 버튼을 표시하되 모바일의 경우 버튼을 숨기고 드롭다운 구성요소를 사용합니다.
프로시저
-
상단에서 데스크톱 폼 요소 아이콘이 선택되어 있는지 확인합니다.
-
첫 번째 버튼 구성요소를 추가합니다.
-
구성 패널의 구성 탭에서 레이블 필드의 기본 텍스트를 입력하여 작업을 바꿉니다.
-
구성 패널의 구성 탭에서 레이블 필드의 기본 텍스트를 입력하여 작업을 바꿉니다.
-
7단계를 두 번 반복하여 버튼을 두 개 더 추가하고 7d에서 버튼의 이름을 인시던트 및 변경으로 지정합니다.
주:단추를 추가하려면 콘텐츠 트리에서 단추 1 을 가리키고 메뉴 아이콘을 선택한 다음 뒤에 추가를 선택합니다.
-
컨텐츠 트리와 페이지가 정확한지 확인합니다.
-
각 버튼 주위에 약간의 공간을 추가합니다.
-
메뉴에서 XS (엑스트라 스몰)를 선택합니다.
-
메뉴에서 XS (엑스트라 스몰)를 선택합니다.
-
버튼을 세로 방향에서 가로 방향으로 변경합니다.
-
구성 패널의 방향에서 행 아이콘을 선택합니다.
페이지는 바탕 화면 너비에서 잘 보입니다. -
구성 패널의 방향에서 행 아이콘을 선택합니다.
-
태블릿 폼 팩터 아이콘을 선택합니다.
버튼의 간격과 위치도 태블릿 너비에서 잘 보입니다.
-
모바일 응답형 작성 아이콘을 선택합니다.
버튼은 더 작은 크기에서 거의 모든 가로 공간을 사용합니다.
-
드롭다운 구성요소를 추가합니다.
-
구성 패널의 구성 탭에서 자리 표시자 텍스트에서 기본 텍스트를 제거하고 아이콘에서 메뉴 개요를 선택합니다.
-
구성 패널의 구성 탭에서 자리 표시자 텍스트에서 기본 텍스트를 제거하고 아이콘에서 메뉴 개요를 선택합니다.
-
모바일 양식 요소에서 버튼 구성요소를 숨깁니다.
- 스테이지 상단에서 모바일 폼 팩터 아이콘을 선택합니다.
- 콘텐츠 트리에서 버튼 1을 선택합니다.
- 구성 패널의 구성 탭에서 구성요소 숨기기를 선택합니다.
- 버튼 2와 버튼 3에 대해 b-c 단계를 반복합니다.
- 저장을 선택합니다.
두 위치는 버튼 구성요소가 모바일 크기에서 숨겨져 있음을 보여줍니다. 먼저 구성 패널에서 구성요소 숨기기 옵션 옆에 있는 모바일 아이콘을 선택합니다. 값(선택한 구성요소 숨기기)이 모바일 크기용인지 확인하는 메시지가 표시됩니다.
둘째, 콘텐츠 트리에 숨겨진
아이콘과 함께 세 개의 버튼 구성요소가 표시됩니다. -
미리 보기를 선택합니다.
모바일 폼 팩터가 메뉴 아이콘과 함께 표시됩니다. 화살표를 선택하면 기본 옵션(목록 항목 1, 목록 항목 2 등)이 표시됩니다. 태블릿 및 데스크톱 양식 요소에서 사용할 수 있는 가로 버튼과 마찬가지로 작업, 인시던트 및 변경 사항을 표시하도록 드롭다운 구성요소를 구성합니다.