위젯 작업 > 2D > 탭
  
탭
이 위젯의 기능은 무엇인가요?
탭 위젯은 특별한 유형의 컨테이너입니다. 위젯 내의 각 탭에는 고유한 콘텐츠가 있습니다. 탭 사이를 빠르게 전환할 때 모든 탭이 자신의 콘텐츠를 로드하게 되지만, 동시에 표시되는 탭은 오직 하나입니다.
이 위젯은 언제 사용해야 하나요?
경험의 뷰, 데이터 집합 또는 기능적 측면 간 전환과 같은 높은 레벨의 콘텐츠 구성을 사용하려는 경우 탭을 사용합니다. 예를 들어 세 가지 트럭 모델에 대한 데이터를 표시하려는 경우, 탭을 사용하면 경험 뷰어는 세 트럭 모두에 대한 정보를 손쉽게 전환할 수 있습니다.
특별한 속성, 서비스, 이벤트 또는 작업이 있나요?
공통적인 위젯 속성, 서비스 및 이벤트 목록을 보려면 공통적인 위젯 속성, 서비스 및 이벤트 항목을 참조하십시오.
다음 테이블은 이 위젯에 한정된 속성, 서비스 및 이벤트 목록을 제시합니다.
속성
JavaScript
유형
설명
탭 방향
taborientation
string
세로 또는 가로를 선택합니다.
* 
두 옵션을 전환할 때 방향은 Vuforia Studio에서 변경되지 않습니다. 변경 사항을 보려면 경험을 미리 봐야 합니다.
탭 안쪽 여백
tabpadding
string
탭 및 탭 콘텐츠를 포함하는 컨테이너에 대한 안쪽 여백을 설정합니다. 숫자 뒤에 지원되는 다음 형식 중 한 가지를 입력합니다(예: 10px).
• px
• %
• in
• mm
• cm
• ex
• em
• pt
• pc
여러 탭 콘텐츠에 대해 안쪽 여백을 설정하려는 경우 프로젝트 트리에서 각각 선택한 다음 각 안쪽 여백을 편집할 수 있습니다.
탭 스트립 클래스
stripclass
string
탭의 스트립 또는 바에 대한 특별한 클래스를 지정합니다.
이벤트
JavaScript
설명
탭 클릭
clicktab
탭 클릭 이벤트를 프로젝트 트리의 모델로 끌어 놓습니다. 탭 클릭 이벤트 옆의 JS 아이콘을 클릭하여 표현식을 입력합니다.
다음 작업을 이 위젯에서 사용할 수 있습니다.
• 탭 추가
탭이 추가된 경우 탭에 대해 다음 속성이 표시됩니다.
속성
JavaScript
유형
설명
제목
title
string
탭에 표시되는 텍스트입니다.
위젯 작동
본 예는 위젯의 작동 장면입니다.
사용에 필요한 최소 단계
작동 장면
1. 탭 위젯을 캔버스로 끌어서 놓습니다.
2. 탭 추가를 클릭하여 원하는 만큼 탭을 추가합니다. 본 예에서는 추가 탭을 두 개 추가했습니다.
3. 탭을 선택하고 제목 필드에 표시하려는 탭 이름을 입력합니다.
4. 탭에 표시하려는 위젯을 탭 콘텐츠로 끌어서 놓습니다.
CSS를 사용하여 위젯 스타일 적용
CSS를 사용하여 위젯에 스타일을 적용할 수 있습니다! 다음은 사용자가 작성하여 적용할 수 있는 CSS 클래스의 예제입니다.
* 
다른 클래스 또는 기본 제공(OOTB) 속성과 충돌하지 않도록 클래스에 고유한 이름을 지정하는 것이 좋습니다.
CSS 예제
작동 장면
.ptc-tabs .tab-strip-item {
font-size: 25px;
}
CSS 클래스 구현에 관한 자세한 정보는 응용 프로그램 스타일 항목을 참조하십시오.