본문으로 건너뛰기

Tab 컴포넌트

Tab은 같은 비즈니스 객체나 워크플로의 병렬 콘텐츠를 구성합니다. 사용자는 현재 페이지를 벗어나지 않고 여러 콘텐츠 영역을 전환할 수 있습니다. 정보 관리, 단계별 설정, 상세 정보 그룹화, 편집과 검토 작업 공간에 적합합니다.

이 문서에서는 여러 Tab 추가, Line／Card／Editable Card 모양, 상하좌우 위치, 가운데 정렬, 비활성화, 최초 렌더링 지연, Form과 필드 구성, 개별 Tab과 외부 컨테이너의 onClick 설정을 설명합니다.

Tab은 같은 객체 안의 병렬 보기에만 사용합니다. 독립 URL, 권한 또는 메뉴 강조가 필요한 별도 모듈에는 페이지 메뉴를 사용하고, 많은 Tab으로 애플리케이션 탐색을 대신하지 마십시오.

1. 예제: 캠페인 출시 작업 공간​

Spark Sample의 Tab 페이지는 다음 구성을 사용합니다.

Tab콘텐츠주요 내용
Overview캠페인 이름, 담당자, 출시일, 예산, 요약일반 폼과 초안 저장
Delivery settings채널, 대상, 승인, 기본 언어, 배포 안내Select, Switch, 설정 검증
Review & publish읽기 전용 요약과 게시 버튼지연 렌더링, Tab 간 상태, 인터랙션
Audit log (coming soon)아직 제공되지 않음비활성 Tab

이 예제는 백엔드 Sample API에 의존하지 않습니다. 값은 현재 페이지 상태에 보관됩니다. 비즈니스 데이터를 불러오려면 Tab 안에 Data Form, DataList, ProTable 또는 다른 데이터 컴포넌트를 추가하십시오.

2. Tab 컨테이너 추가​

  1. 대상 페이지를 Page Designer에서 엽니다.
  2. 왼쪽 컴포넌트 패널에서 Containers를 펼칩니다.
  3. Tab을 Screen 또는 컨테이너를 허용하는 영역으로 끌어 놓습니다.
  4. Tab 컨테이너를 선택하고 Tabs 하위 요소 영역에서 Tab을 추가합니다.
  5. 각 하위 Tab을 선택하고 Tab Label을 입력합니다.
  6. Form, 필드, 버튼 또는 다른 컨테이너를 해당 Tab에 배치합니다.
Tab
├── Overview
│   └── Form
├── Delivery settings
│   └── Form
├── Review & publish
│   └── Form
└── Audit log (coming soon)

3. Tab 컨테이너 설정​

속성값설명
Tab Styleline, card, editable-cardLine은 밑줄, Card는 카드형 Tab, Editable Card는 편집형 카드 모양만 사용합니다
Tab Positiontop, right, bottom, left콘텐츠 영역을 기준으로 레이블 위치를 지정합니다
Center Tabs켜기／끄기위·아래에서는 가운데 정렬하고, 좌·우에서는 세로 배열을 유지합니다

editable-card도 런타임 사용자가 페이지 구조를 추가하거나 삭제할 수는 없습니다. Tab 수와 순서는 Page Designer에서 관리합니다.

스타일이나 위치를 선택하면 디자인 캔버스에서 즉시 미리 볼 수 있습니다. 페이지를 저장하면 런타임에도 저장된 설정이 적용됩니다.

4. 개별 Tab 설정​

속성설명
Tab LabelTab에 표시할 짧고 명확한 이름
Always Render켜면 최초 페이지 로드 시, 끄면 처음 Tab을 열 때 콘텐츠를 렌더링합니다
DisabledTab 선택을 막습니다. 준비 중이거나 현재 조건에서 사용할 수 없는 콘텐츠에 적합합니다

4.1 Always Render 선택​

  • 필드가 적거나 상태를 즉시 공유해야 하면 켭니다.
  • 차트, 원격 목록, 무거운 컴포넌트가 많으면 끕니다.
  • 끄더라도 최초 렌더링만 지연됩니다. 한 번 연 뒤 일반 전환에서는 입력값이 자동으로 사라지지 않습니다.

4.2 Disabled 선택​

비활성 Tab은 레이블은 표시하지만 콘텐츠를 전환하거나 onClick을 실행하지 않습니다. 항상 접근할 수 없어야 하는 구조는 삭제하거나 숨기고, Disabled는 일시적인 사용 불가 상태에 사용하십시오.

5. Tab 콘텐츠 구성​

  1. 각 Tab에는 명확한 주제 하나만 둡니다.
  2. 폼 콘텐츠는 먼저 Form을 추가하고 안에 필드를 배치하여 열 수, 레이블 비율, 레이아웃, 검증을 통일합니다.
  3. 페이지의 주요 작업은 마지막 검토 Tab이나 고정 영역에 둡니다.
  4. 무거운 데이터 목록이 있는 Tab은 Always Render를 끕니다.
  5. Tab이 5～7개를 넘으면 정보 구조를 다시 검토하고, 사용 빈도가 낮은 콘텐츠는 그룹, Drawer 또는 별도 페이지로 이동합니다.

예제의 Overview와 Delivery settings는 편집 가능한 Form을, Review & publish는 같은 이름의 읽기 전용 필드를 사용합니다. 앞의 Tab에서 값을 바꾸면 검토 Tab에 최신 값이 표시됩니다.

6. 인터랙션 설정​

Tab은 하위 Tab의 onClick과 외부 Tab 컨테이너의 onClick 두 단계를 지원합니다.

  1. 캔버스나 하위 요소 목록에서 대상 Tab을 선택합니다.
  2. 오른쪽 Interaction을 엽니다.
  3. onClick에 Toast, 페이지 컨텍스트 변경, API 요청 또는 다른 액션을 추가합니다.
  4. 저장한 뒤 런타임에서 확인합니다.

활성 Tab을 선택하면 하위 Tab의 onClick을 먼저 실행하고 외부 컨테이너의 onClick을 실행합니다. Disabled Tab은 실행하지 않습니다. 예제에서는 Review & publish와 게시 버튼에 각각 메시지를 설정했습니다.

7. 예제 재현​

  1. Tab을 추가하고 line, top, 가운데 정렬 끄기를 유지합니다.
  2. Overview, Delivery settings, Review & publish, Audit log (coming soon)을 추가합니다.
  3. 앞의 세 Tab에 2열 Horizontal Form을 하나씩 추가합니다.
  4. Overview에 Input, DatePicker, TextArea, Save draft를 추가합니다.
  5. Delivery settings에 Dropdown Select, Switch, Input, TextArea, Validate settings를 추가합니다.
  6. Review & publish에 읽기 전용 필드와 Publish campaign을 추가하고 Always Render를 끕니다.
  7. Audit log를 Disabled로 설정하고 Always Render를 끕니다.
  8. Review & publish의 onClick에 Info Toast를 추가합니다.
  9. 세 작업 버튼에 Toast를 추가합니다. 예:
Campaign [[campaignName]] is ready for [[campaignChannel]].

8. 문제 해결​

8.1 스타일이나 위치 변경이 런타임에 반영되지 않음​

페이지가 저장되었고 런타임 URL이 현재 디자인 버전의 versionId를 사용하는지 확인하십시오. 캔버스는 즉시 미리 보지만 런타임은 저장된 Page JSON을 읽습니다.

8.2 Tab 클릭 시 인터랙션이 실행되지 않음​

  • Interaction이 내부 Form이 아니라 실제 하위 Tab에 설정되어 있는지 확인합니다.
  • 이벤트가 onClick인지 확인합니다.
  • Tab이 Disabled인지 확인합니다.
  • 페이지가 저장되었고 런타임이 현재 버전을 사용하는지 확인합니다.

8.3 Tab 전환 후 필드 값이 사라짐​

각 필드에 안정적이고 고유한 Name을 사용하십시오. 같은 값을 공유할 편집 영역과 읽기 전용 영역에는 같은 Name을 사용해야 합니다. 다른 Name은 서로 독립된 페이지 상태입니다.

8.4 최초 페이지 로드가 느림​

원격 목록, 차트 또는 많은 필드가 있는 첫 화면 이외의 Tab에서는 Always Render를 끄십시오.

9. 디자인 권장 사항​

  • Overview, Configuration, History처럼 명사나 짧은 동작 구문을 사용합니다.
  • 같은 그룹은 비슷한 정보 계층을 유지하고 Details, System settings, Sign out을 같은 수준에 두지 않습니다.
  • 중요한 오류, 저장되지 않은 상태, 게시 결과를 색상만으로 표현하지 말고 읽을 수 있는 문구도 제공합니다.
  • 모바일에서는 Tab 수를 줄입니다. 좌우 위치는 데스크톱의 일부 작업 영역에 더 적합합니다.
  • 독립 링크, 브라우저 기록, 메뉴 권한이 필요하면 별도 페이지와 메뉴를 사용합니다.
최종 수정: 에