Product Inspector 301: 속성 팝업 빌드
사전 요구 사항
이 섹션을 시작하기 전에 Product Inspector 201: 부품 검색 빌드 항목을 완료했는지 확인하십시오.
이 시점에서, 선택한 구성 요소와 연관된 메타데이터가 2D 사용자 인터페이스 내에서 로드되고 렌더링되고 있습니다. 시각적 표시기는 현재 선택한 항목을 강조 표시하여 사용자 방향 감각을 향상시킵니다. 모델 계층 구조를 보다 자세히 검사할 수 있도록 선택한 하위 어셈블리에 대해 확장된 메타데이터를 동적으로 표시하는 속성 패널을 통합하겠습니다.
1. > 의 왼쪽 팝업에 대해 다음 CSS를 정의합니다.
.left-side-popup {
position: fixed;
left: 0px !important;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 0px 5px 5px 0px;
background-color: $PTC-dark-grey;
opacity: 90%;
}
2. Visualization 보기의 2D 캔버스로 이동합니다.
3. 캔버스에 팝업 위젯을 추가하고 다음 속성을 구성합니다.
◦ 클래스 - left-side-popup을 입력합니다.
◦ Studio ID - propertyPopup을 입력합니다.
4. 이제 팝업 위젯에 그리드 레이아웃 위젯을 추가합니다.
5. 그리드 레이아웃 위젯을 선택한 상태에서 세부 정보 창의 여백 필드에 10px를 입력합니다.
6. 프로젝트 트리에서 새 팝업 아래의 열을 선택하여 세부 정보 창을 표시합니다. 눈금 작업에서 열 추가를 클릭합니다.
7. 왼쪽 열을 선택하고 다음 속성을 구성합니다.
◦ 공간 배치 방향 - 행을 선택합니다.
◦ 콘텐츠 양쪽 맞춤 - 시작을 선택합니다.
◦ 항목 맞춤 - 가운데를 선택합니다.
8. 왼쪽 열에 레이블을 추가하고 다음 속성을 구성합니다.
◦ 텍스트- Part Details를 입력합니다.
◦ 클래스 - simple-label title-label을 입력합니다.
◦ 안쪽 여백(즉, 10px 10px 20px 10px) - 0px 0px 10px 0px를 입력합니다.
◦ Studio ID - partDetailsTitleLabel을 입력합니다.
9. 오른쪽 열을 선택하고 다음 속성을 구성합니다.
◦ 공간 배치 방향 - 행을 선택합니다.
◦ 콘텐츠 양쪽 맞춤 - 끝을 선택합니다.
◦ 항목 맞춤 - 가운데를 선택합니다.
10. 오른쪽 열에 버튼을 추가하고 다음 속성을 구성합니다.
◦ 텍스트- Part Details를 입력합니다.
◦ 클래스 - simple-label title-label을 입력합니다.
◦ 안쪽 여백(즉, 10px 10px 20px 10px) - 0px 0px 10px 0px를 입력합니다.
◦ Studio ID - closePartDetailsButton을 입력합니다.
11. closePartDetailsButton의 클릭 이벤트를 프로젝트 트리의 propertyPopup으로 끌어 놓습니다. 바인딩 대상 선택 창에서 팝업 숨기기를 선택하고 바인딩을 클릭합니다.
12. 프로젝트 트리에서 propertyPopup 아래의 row를 선택합니다. 눈금 작업 아래의 세부 정보 창에서 행 추가를 클릭합니다.
13. 새 행(두 번째 행)에 반복기 위젯을 추가합니다. Studio ID에 propertiesList를 입력합니다.
14. 반복기에 그리드 레이아웃 위젯을 추가합니다.
15. 프로젝트 트리에서 propertiesList 아래의 row를 선택합니다. 눈금 작업 아래의 세부 정보 창에서 행 추가를 클릭합니다
.
16. 왼쪽 열에 레이블을 추가하고 다음 속성을 구성합니다.
◦ 텍스트 - {{item.name}}을 입력합니다.
◦ 클래스 - simple-label simple-label--green을 입력합니다.
◦ 안쪽 여백(즉, 10px 10px 20px 10px) - 0px 0px 10px 0px를 입력합니다.
◦ Studio ID - itemNameLabel을 입력합니다.
17. 이제, 오른쪽 열에 레이블을 추가하고 다음 속성을 구성합니다.
◦ 텍스트 - {{item.name}}을 입력합니다.
◦ 클래스 - simple-label을 입력합니다.
◦ 안쪽 여백(즉, 10px 10px 20px 10px) - 0px 0px 10px 0px를 입력합니다.
◦ Studio ID - itemValueLabel을 입력합니다.
18. > 에서 다음 추가 CSS를 정의합니다.
.simple-label--green {
color: $PTC-neon-green;
font-weight: 600;
}
19. 축하합니다. 이 사용 사례를 완료했습니다! 다음으로 사용 사례: Product Explorer로 의미 있는 모델 데이터 보기 항목을 확인하십시오.