> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/ui-ux/undefined/tab.md).

# 탭(Tab) 적용 가이드

X2BEE의 메뉴의 작업 공간을 구분하고 탭을 클릭하여 작업 공간의 화면을 이동하는 역할을 합니다.

탭을 구성하는 요소와 활용 정보를 설명합니다.

***

## 기본 구성 요소 <a href="#undefined" id="undefined"></a>

1. 탭이 정의하는 해당 정보의 상단에 탭 그룹을 구성합니다.
2. 입력이 가능한 탭의 경우 저장 버튼은 화면 단위로 저장할 수 있게 공통 영역에 포함하여 구성합니다.
3. 탭 개수가 많은 경우, 탭 방향키를 사용할 수 있습니다. (Tab in Tab(세로형) 이중탭은 사용하지 않습니다.)

## 배치 <a href="#undefined" id="undefined"></a>

가장 중요하고 선택 빈도가 높은 항목 또는 작업 순서 상 첫번째 탭을 좌측에 배치하고 활성화 합니다.

탭 배치를 위해 다음 가이드를 참고해야 합니다.

* 탭은 한 줄로 구성하며 두 줄로 표현하지 않음
* 선택 탭은 선택 되지 않은 탭과 구분할 수 있도록 시각적으로 명확하게 표현해야 함
* TabControl의 탭의 개수는 브라우저의 메모리 및 로딩 속도를 고려해 5개의 탭 생성을 권장하며, 최대 10개까지 생성을 제한함

<figure><img src="https://tech.x2bee.com/download/attachments/14975047/%ED%83%AD%20%EC%A0%95%EB%A0%AC.png" alt=""><figcaption></figcaption></figure>

## 정보 유형별 탭 <a href="#undefined" id="undefined"></a>

A타입

같은 조회조건으로 검색된 동일한 레벨의 정보 그룹을 탭으로 나타낸다.

동일레벨의 정보가 분할하여 보여지는 타입과 업무 처리 순서에 따라 배열하는 프로세스형 타입으로 사용됩니다.

<figure><img src="https://tech.x2bee.com/download/attachments/14975047/tab%20tayp.png" alt=""><figcaption></figcaption></figure>

B타입

관련 화면을 모아서 업무 순서대로 배열한 방식 탭 안에 개별 조회 영역을 포함할 수 있습니다.

<br>

<figure><img src="https://tech.x2bee.com/download/attachments/14975047/Untitled%20Diagram.drawio.png" alt=""><figcaption></figcaption></figure>