Tab

Tab 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.

컨트롤 설명

N개의 화면들을 하나의 화면에서 보여줄 수 있습니다.

탭 컨트롤은 일반 스텝에서 제공하는 기능이 적용되지 않습니다.

따라서 스텝버튼을 그려주지 않으며 스텝 이벤트도 실행되지 않습니다.

서브시나리오 스텝은 탭 컨트롤에서 보여줄 수 없습니다.

스타일 유형

다양한 스타일 유형들을 제공하고 있습니다.

디자인(Design) 모드

디자인 모드에서는 탭 영역별 디자인을 설정할 수 있습니다. 아래 이미지를 통해 디자인을 변경할 수 있는 항목을 확인할 수 있습니다.

영역별 디자인 설정

적용 영역

설정 영역

1. Tab Header 설정

Tab Header 영역 전체에 대한 디자인을 변경할 수 있습니다.

배경 변경시 아래와 같이 전체 영역 색이 변하는 것을 확인할 수 있습니다.

아이템 배열

Tab Header Item들의 배치를 설정할 수 있습니다.

• 컨텐츠 맞춤

  • Tab Header Item들을 정렬할 수 있습니다. (좌측 정렬, 중앙 정렬, 우측 정렬)

예시

• 사이즈 고정

  • 너비를 지정할 수 있습니다.

  
• 균등분배

2. Tab Header Item 설정

Tab Header Item 각각에 대한 디자인을 변경할 수 있습니다.

텍스트 색상 변경시 아래와 같이 Item 텍스트 색이 변하는 것을 확인할 수 있습니다.

3. 선택된 Tab Header Item 설정

선택된 Tab Header Item 각각에 대한 디자인을 변경할 수 있습니다.

텍스트 색상 변경시 아래와 같이 Item 텍스트 색이 변하는 것을 확인할 수 있습니다.

공통 디자인 속성

컨트롤 명

스타일 유형

높이

배경

보더

마진

패딩

텍스트

개발(Dev) 모드

개발 모드에서는 탭을 추가하고 이벤트를 연결할 수 있습니다. 아래 이미지를 통해 변경할 수 있는 항목을 확인할 수 있습니다.

탭 항목 값 콜렉션 키

Tab컨트롤에서 특정 Tab Item 선택시 정의된 탭 항목 값을 저장할 컬렉션 키를 지정합니다.

컨트롤 로드시 해당 컬렉션 키 값과 일치하는 탭 항목 값이 있는 경우 해당 탭을 먼저 보여줍니다.

기본값

탭 항목 값을 저장한 컬렉션 키에 값이 없는 경우 기본값을 할당할 수 있습니다.

기본값과 일치하는 탭 항목 값이 있는 경우 해당 탭을 먼저 보여줍니다.

탭 항목

• 탭이름 Tab Item에 보여줄 명칭을 정의합니다.

• 스텝명

  Tab Item 선택시 보여줄 스텝을 연결합니다.

• 탭 항목 값

  Tab Item 선택시 탭 항목 값 콜렉션 키 저장할 값을 입력합니다.

• 이벤트명

  Tab Item 선택시 실행할 이벤트를 지정할 수 있습니다.

• 탭 추가

  Tab Item을 추가합니다.

공통 개발 속성

로드스크립트