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