Setup

Create New

탭 컴포넌트의 기본 셋팅 화면은 탭 목록을 관리하는 Config와 Options 2개의 영역으로 구분되어 있다.

Open

Set Config

을 클릭하면 Add Tab 영역이 하단에 출력된다. 탭 이름과 타입을 선택하고 저장하면 Config 영역에 리스트업 된다. 탭 목록에서 을 클릭하여 Update Tab 영역에서 탭 설정 내용을 수정 할 수 있다.

Open

Type 01. Page

탭 타입을 Page로 선택하면 다음과 같은 셋팅 옵션이 출력된다.

• Tab Page : 미리 생성된 다른 페이지의 URL 입력 또는 선택

• Data Setting : 연관 데이터 설정 여부 ON/OFF

• Data Key : 연관 데이터 키 입력

• Data NodeType : 연관 데이터 NodeType 입력 또는 선택

• icon

탭 클릭 시 연결되어 있는 Page 1개가 하단에 출력된다.

Type02. Component

탭 타입을 Component로 선택하면 다음과 같은 셋팅 옵션이 출력된다. (icon 추가)

탭 클릭 시 연결되어 있는 Component 1개가 하단에 출력된다.

tip BO Builder > Board Component new

Board 컴포넌트는 게시판 목록과 상세 View 2개의 컴포넌트를 하나로 만든 것이다.

Board 컴포넌트도 아래와 같이 하나의 탭에 연결하여 사용할 수 있다.

Option Detail

탭 옵션 상세 내용은 다음과 같다.

1. Size

탭 사이즈를 선택 할 수 있다.(Small, Default, Large)

2. Hide Title

컴포넌트 Title은 기본 셋팅 옵션이다. 옵션 영역에서 탭 타이틀을 노출/비노출로 설정 할 수 있다.

3. Tab Position

탭 위치를 설정 할 수 있다.(Top, Right, Bottom, Left)

4. Tab Type

탭의 스타일 타입을 설정 할 수 있다.(Line, Card)

5. Tab Editable new

카드 유형 탭일 경우, 탭 추가 및 삭제 기능을 사용할 수 있는 탭 에디팅 옵션을 지원한다. - https://ant.design/components/tabs/#components-tabs-demo-editable-card

추가 아이콘 을 클릭 하면, Add Tab 이 Modal로 출력된다.

6. Show Icon new (tab 생성할 때 추가)

각각의 탭 Name 앞에 아이콘을 출력하는 기능이다. - https://ant.design/components/tabs/#components-tabs-demo-icon

• Icon Setting Type : 아이콘 설정 타입 선택(Unify, Separate)

  • Select Icon : Unify 타입으로 아이콘을 설정할 경우 출력되는 아이콘 셀렉트 옵션

  • Enable Separate Tab Icon : Sdparate 타입으로 아이콘 설정할 경우 탭별 아이콘을 설정하는 영역 출력

tip Icon Setting Type

- unify : 아이콘을 1개 선택 할 수 있고, 선택한 아이콘이 모든 탭에 동일하게 적용된다.

- separate : 탭 목록이 설정해 놓은 Config를 기준으로 자동 출력되고, 탭 별로 아이콘 셋팅이 가능하다.

7. Use Anchor new

모든 탭을 Tab Child Type{Component} 로 설정하면, Anchor 기능을 사용 할 수 있다. 탭에 연결된 컴포넌트가 한 페이지에서 탭 정렬 순서에 맞추어 나열되고, 각각의 탭은 클릭 시 연결된 컴포넌트 위치로 이동되는 Anchor 기능이 적용된다.