Tabs 위젯의 탐색과 선택 상태
Tabs는 탭마다 Workshop 이벤트를 연결하여 페이지와 overlay 등의 화면을 탐색하는 위젯입니다. 실제 페이지나 Tabs layout과는 별도의 탐색 구성 요소입니다.
탭 항목
Add item으로 탭을 만들고 항목을 선택하여 Label, 왼쪽 Icon과 On click의 Add event를 구성합니다.
Badge의 기본값은 표시하지 않음입니다. 필요하면 String 또는 Numeric 변수로 레이블 오른쪽에 값을 표시합니다.
Conditional visibility에 Boolean 변수를 연결할 수 있습니다. Disabled를 선택하면 true일 때 활성화, false일 때 비활성화합니다. Hidden을 선택하면 true일 때 표시, false일 때 숨깁니다.
디자인
| Design | 추가 설정 |
|---|---|
| Outline | Default 또는 Large 크기 |
| Block | Default 또는 Large 크기. Minimal styling은 활성 색을 더 옅게 표시합니다. |
| Prominent | 너비와 Default 또는 Large 크기 |
| Grouped | Small, Default 또는 Large 크기 |
Active color는 현재 탭의 색입니다. Tab Height는 정해진 높이 또는 Custom 픽셀값을 사용할 수 있습니다. Auto는 컨테이너 높이에 맞추며 Fill을 켜면 위젯 높이를 채웁니다.
Direction은 Horizontal 또는 Vertical입니다. Vertical에서는 왼쪽 또는 가운데 정렬을 선택합니다.
선택 상태를 판단하는 방식
Tabs 위젯은 독립적인 선택 상태를 보관하지 않습니다. 구성한 Switch to tab과 Switch to page 이벤트 중 현재 레이아웃에서 실행해도 변화가 없는 이벤트를 통해 선택을 판단합니다.
예를 들어 현재 Tab A가 열려 있을 때 Switch to Tab A를 가진 항목은 이미 해당 위치에 있으므로 선택된 탭으로 표시합니다. 여러 레이아웃 이벤트를 구성했다면 이런 일치 이벤트가 가장 많은 항목을 고르고 동률이면 앞에 있는 탭을 우선합니다.
Tabs 위젯을 추가하는 것만으로 Switch to tab 또는 Switch to page 이벤트가 만들어지지는 않습니다. 페이지나 탭 레이아웃을 먼저 구성한 뒤 해당 이벤트를 연결합니다.
변수 기반 선택과 함께 사용
초기 선택에는 변수 기반 레이아웃의 String 변수와 해당 Tab ID 또는 Page ID를 사용합니다. Routing을 사용하는 페이지 선택 변수는 기본값을 비워 두는 조건도 적용합니다.
Set variable value 이벤트는 Tabs 위젯의 선택 표시를 판단하는 데 사용하지 않습니다.
- 탭 선택 변수에는 Switch to tab을 사용할 수 있습니다. 화면과 연결 변수값이 함께 바뀌며 선택 표시에도 사용합니다.
- 페이지 선택 변수에는 Set variable value와 Switch to page를 함께 구성합니다. Switch to page만으로는 변수값을 갱신하지 않으며 Set variable value만으로는 Tabs의 선택 판정에 사용하지 않습니다.
이벤트의 일반적인 순서와 계산 완료 조건은 이벤트를 따릅니다. 입력을 포함한 작업 화면에는 Inline Action을 연결할 수 있습니다.