랜딩 페이지 만들기
탐색을 개선하기 위해 이 섹션에서 팝업을 추가합니다. 팝업은 UI를 보다 효과적으로 구조화하고 더 나은 사용자 경험을 제공하는 데 도움이 됩니다.
1. > 에서 전체 페이지 팝업에 대해 다음 CSS를 정의합니다.
.full-page-popup {
background-color: $PTC-dark-grey;
}
이제 응용 프로그램 스타일이 다음과 유사해야 합니다.
2. Identification 보기로 이동합니다.
3. 캔버스에 팝업 위젯을 추가하고 다음 속성을 구성합니다.
◦ 클래스 - full-page-popup을 입력합니다.
◦ 너비(px, %, vh, em) - 100%를 입력합니다.
◦ 높이(px, %, vh, em) - 100%를 입력합니다.
◦ 표시 - 확인란을 선택합니다.
◦ Studio ID- landingPagePopup을 입력합니다.
4. 다음 바인딩을 만듭니다.
◦ 프로젝트 트리에서 scan-1을 선택합니다. 사용자가 취소함 이벤트를 프로젝트 트리의 landingPagePopup으로 끌어 놓습니다. 바인딩 대상 선택 창에서 팝업 표시를 선택하고 바인딩을 클릭합니다.
◦ 프로젝트 트리에서 Start scanning 버튼을 선택합니다. 버튼의 클릭 이벤트를 프로젝트 트리의 landingPagePopup으로 끌어 놓습니다. 바인딩 대상 선택 창에서 팝업 숨기기를 선택하고 바인딩을 클릭합니다.
5. 이제 레이아웃에 더 많은 구조를 제공하기 위해 팝업 위젯에 그리드 레이아웃 위젯을 추가합니다.
6. 그리드 레이아웃 위젯을 선택한 상태에서 세부 정보 창에서 행이 사용 가능한 높이를 균등하게 분할 확인란을 선택합니다.
7. 행 추가를 두 번 클릭하여 그리드에 행을 두 개 더 추가합니다(세부 정보 창의 눈금 작업 아래).
8. 첫 번째 행은 비워 둡니다.
9. 두 번째 행을 선택하고 다음을 완료합니다.
◦ 공간 배치 방향 - 열을 선택합니다.
◦ 콘텐츠 양쪽 맞춤 - 가운데를 선택합니다.
◦ 항목 맞춤 - 가운데를 선택합니다.
◦ 레이블 위젯을 추가하고 다음 속성을 구성합니다.
▪ 텍스트 - Welcome to the를 입력합니다.
▪ 클래스 - simple-label title-label을 입력합니다.
▪ Studio ID - welcomeLabel을 입력합니다.
◦ 두 번째 레이블 위젯을 추가하고 다음 속성을 구성합니다.
▪ 텍스트 - Displaying Dynamic Assets 101 sample을 입력합니다.
▪ 클래스 - simple-label sub-title-label을 입력합니다.
▪ Studio ID - experienceTitleLabel을 입력합니다.
10. 세 번째 행을 선택하고 다음 작업을 완료합니다.
◦ 공간 배치 방향을 행으로 설정합니다.
◦ 콘텐츠 양쪽 맞춤을 가운데로 설정합니다.
◦ 항목 맞춤을 끝으로 설정합니다.
◦ 안쪽 여백(즉, 10px 10px 20px 10px)을 20px로 설정합니다.
11. 다음으로 Start scanning 버튼을 세 번째 행으로 이동하고 다음 속성을 업데이트합니다.
◦ 텍스트 - Scan the QR code을 입력합니다.
◦ 클래스 - long-button--green을 입력합니다.
◦ Studio ID - startScanButton을 입력합니다.
12. 이제 랜딩 페이지를 빌드했으므로 제품 식별 팝업을 추가합니다.