탭

탭 위젯은 특별한 유형의 컨테이너입니다. 위젯 내의 각 탭에는 고유한 콘텐츠가 있습니다. 탭 사이를 빠르게 전환할 때 모든 탭이 자신의 컨텐트를 로드하게 되지만, 동시에 표시되는 탭은 오직 하나입니다.

경험의 뷰, 데이터 집합 또는 기능적 측면 간 전환과 같은 높은 레벨의 컨텐트 구성을 사용하려는 경우 탭을 사용합니다. 예를 들어 세 가지 트럭 모델에 대한 데이터를 표시하려는 경우, 탭을 사용하면 경험 뷰어는 세 트럭 모두에 대한 정보를 손쉽게 전환할 수 있습니다.

속성

설명

탭 방향

세로 또는 가로를 선택합니다.

두 옵션을 전환할 때 방향은 ThingWorx Studio에서 변경되지 않습니다. 변경 사항을 보려면 경험을 미리 봐야 합니다.

탭 안쪽 여백

탭 및 탭 컨텐트를 포함하는 컨테이너에 대한 안쪽 여백을 설정합니다. 숫자 뒤에 지원되는 다음 형식 중 한 가지를 입력합니다(예: 10px).

• px

• %

• in

• mm

• cm

• ex

• em

• pt

• pc

여러 탭 컨텐트에 대해 안쪽 여백을 설정하려는 경우 프로젝트 트리에서 각각 선택한 다음 각 안쪽 여백을 편집할 수 있습니다.

탭 스트립 클래스

탭의 스트립 또는 바에 대한 특별한 클래스를 지정합니다.

제목

탭의 제목입니다.

이벤트	설명
탭 클릭	탭 클릭 이벤트를 프로젝트 트리의 모델로 드래그합니다. 탭 클릭 이벤트 옆의 JS 아이콘을 클릭하여 표현식을 입력합니다.

사용에 필요한 최소 단계	예제에 적용된 옵션 CSS	작동 장면
1. 탭 위젯을 캔버스로 드래그 앤 드롭합니다. 2. 탭 추가를 클릭하여 원하는 만큼 탭을 추가합니다. 본 예에서는 추가 탭을 두 개 추가했습니다. 3. 탭을 선택하고 제목 필드에 표시하려는 탭 이름을 입력합니다. 4. 탭에 표시하려는 위젯을 탭 컨텐트로 드래그 앤 드롭합니다.	없음