# 탭 스트립
## Content
SpreadJS는 탭 스트립과 그 요소들의 동작을 제어할 수 있는 다양한 옵션을 제공합니다. `Workbook.options` 필드의 속성을 사용하여 시트 이름 변경, 시트 색상 설정, 시트 정렬, 탭 스트립의 위치 및 너비 설정 등 다양한 작업을 수행할 수 있습니다.
## 시트 이름 변경
시트 이름은 **더블 클릭하여 직접 수정**할 수 있습니다. 수정 후에는 **탭 영역 밖을 클릭하거나**, **Esc** 또는 **Enter** 키를 눌러 변경을 확정할 수 있습니다.
또한, 시트 이름 편집 기능은 `options.tabEditable` 속성을 통해 **활성화 또는 비활성화**할 수 있습니다. 이 속성의 기본값은 `true`입니다.
```javascript
spread.options.tabEditable = false; // false: disable, true: enable
```
## 시트 탭 정렬하기
탭 스트립에서 시트 이름은 **드래그 앤 드롭**으로 정렬할 수 있습니다. 시트 탭을 선택한 후 **다른 시트들 사이로 드래그**하면, 아래 이미지처럼 **위치 표시선(인디케이터)** 이 나타납니다. 마우스를 놓으면 시트가 해당 위치로 이동됩니다.
시트 탭의 정렬 기능은 `options.allowSheetReorder` 속성을 `true`로 설정하여 **활성화**할 수 있습니다:
```javascript
spread.options.allowSheetReorder = true; // true: enable, false: disable
```
또한 시트가 드래그되기 **전과 후에 각각** [SheetMoving](/spreadjs/api/classes/GC.Spread.Sheets.Events#SheetMoving)와 [SheetMoved](/spreadjs/api/classes/GC.Spread.Sheets.Events#SheetMoved) 이벤트가 발생합니다. 시트의 이동을 **취소**하고 싶을 경우, [SheetMoving](/spreadjs/api/classes/GC.Spread.Sheets.Events#SheetMoving)이벤트 핸들러 내에서 `cancel` 속성을 `true`로 설정하면 됩니다.
## 시트 탭 스타일 설정
시트 탭의 상태에 따라 텍스트 스타일, 배경색, 아이콘 등 시트 탭 스타일을 설정할 수 있습니다. 시트 탭 스타일을 설정하려면 `Workbook` 클래스의 `sheetTabStyles` 또는 `defaultSheetTabStyles` 속성을 사용할 수 있습니다.
`sheetTabStyles` 속성은 각 시트 탭에 대해 특정 상태 스타일을 적용하는 반면, `defaultSheetTabStyles` 속성은 모든 시트 탭의 기본 상태 스타일을 설정합니다.
다음 이미지는 시트 탭의 다양한 상태에 대해 배경색, 글꼴색, 아이콘을 설정한 예를 보여줍니다.
다음 코드 예제는 시트 탭의 다양한 상태에 대한 스타일을 구현한 것입니다.
```javascript
// 'Sheet1'의 normal 상태에 대한 새로운 스타일 설정.
spread.sheetTabStyles.add(GC.Spread.Sheets.SheetTabState.normal, {
icons: [{ src: '../images/img.png', width: 20, height: 20 }],
foreColor: 'red',
font: 'bolder',
backColor: 'green',
}, ['Sheet1']);
// 모든 시트 탭의 보호된 상태에 대한 기본 스타일 설정
spread.options.defaultSheetTabStyles = {
[GC.Spread.Sheets.SheetTabState.protected]: {
icons: [{ src: '../images/lock.jpg', width: 20, height: 20 }],
foreColor: 'blue',
backColor: 'orange',
}
};
```
SpreadJS 디자이너에서는 **설정(SETTINGS) 탭**을 통해 시트 탭 스타일을 커스터마이징하는 기능도 제공합니다.
###### **시트 탭 스타일 관리 방법:**
1. **시트 설정(Sheet Settings)** 그룹에서 **일반(General** 버튼을 클릭합니다.
2. **시트 탭(SheetTab)** 탭을 선택하여 특정 시트 탭 상태에 대한 **색상 및 스타일**을 정의합니다.
3. **스타일 관리(Manage Style)** 버튼을 클릭하여 탭 상태 스타일을 설정합니다.
4. **탭 상태 스타일 목록(Tab State Style List)** 에서 변경하고자 하는 상태를 선택한 후, 해당 상태의 **Edit(편집)** 아이콘을 클릭합니다.
5. **탭 스타일 설정(Tab Style Setting)** 대화 상자에서 선택한 상태에 대해 원하는 **글꼴 스타일**, **배경색**, **아이콘**을 적용합니다.
6. **확인(OK)** 버튼을 클릭합니다.
변경 사항이 시트 탭에 적용됩니다.
###### **기본 시트 탭 스타일을 관리하려면:**
1. **Spread 설정(Spread Settings)** 그룹에서 **탭스트립(TabStrip)** 버튼을 선택합니다.
그러면 **Spread 설정(Spread Settings)** 대화 상자가 열립니다.
2. **스타일 관리(Manage Style)** 옵션을 선택하여 시트 탭 상태 스타일을 설정합니다.
3. **탭 상태 스타일 목록(Tab State Style List)** 에서 원하는 상태를 선택하고, **Edit(편집)** 아이콘을 클릭하여 스타일을 변경합니다.
4. **확인(OK)** 버튼을 클릭하면, 이번에는 변경 사항이 **모든 시트 탭에 적용**됩니다.
## 시트 탭 외형에 Border Radius 적용하기
시트 탭의 테두리 모양은 **내장된 CSS 클래스의 `border-radius` 스타일**을 통해 커스터마이징할 수 있습니다.
* [시트 탭의 위치](/spreadjs/api/enums/GC.Spread.Sheets.TabStripPosition)에 따라 각각의 시트 탭 외형을 정의하는 **전용 CSS 클래스**가 존재합니다.
```css
.sjs-tab-strip-bottom-tab{
border-radius: value;
}
.sjs-tab-strip-left-tab{
border-radius: value;
}
.sjs-tab-strip-right-tab{
border-radius: value;
}
.sjs-tab-strip-top-tab{
border-radius: value;
}
```
* `sjs-tab-strip-[position]-tab` 클래스에서 사용하는 `border-radius` 속성은 **픽셀(px)** 단위의 값만 허용합니다.
이 값은 **0 이상**이어야 하며, 네 모서리의 `border-radius` 값이 모두 0으로 설정되면 **시트 탭의 테두리 radius 스타일은 비활성화**됩니다.
* 각 모서리(위쪽 왼쪽, 위쪽 오른쪽, 아래쪽 왼쪽, 아래쪽 오른쪽)에 대해 개별적으로 `border-radius` 값을 설정하는 것도 지원됩니다.
예를 들어:
1. **하나의 값**을 지정하면, 네 모서리 모두 동일한 border radius을 갖습니다.
```auto
.sjs-tab-strip-bottom-tab{
border-radius: 4px;
}
```
2. `border-radius`에 **두 개의 값**을 지정하면:
**첫 번째 값**은 **왼쪽 상단(top-left)** 및 **오른쪽 하단(bottom-right)** 모서리의 radius을 의미하고,
**두 번째 값**은 **오른쪽 상단(top-right)** 및 **왼쪽 하단(bottom-left)** 모서리의 radius을 의미합니다.
```auto
.sjs-tab-strip-bottom-tab{
border-radius: 0px 5px;
}
```
3. `border-radius`에 **세 개의 값**을 지정하면 다음과 같이 적용됩니다:
**첫 번째 값**: 왼쪽 상단(**top-left**) 모서리
**두 번째 값**: 오른쪽 상단(**top-right**) 및 왼쪽 하단(**bottom-left**) 모서리
**세 번째 값**: 오른쪽 하단(**bottom-right**) 모서리
```auto
.sjs-tab-strip-bottom-tab{
border-radius: 0px 0px 4px;
}
```
4. `border-radius`에 **네 개의 값**을 지정하면 각각 다음 순서로 적용됩니다:
**첫 번째 값**: 왼쪽 상단 (top-left)
**두 번째 값**: 오른쪽 상단 (top-right)
**세 번째 값**: 오른쪽 하단 (bottom-right)
**네 번째 값**: 왼쪽 하단 (bottom-left)
```auto
.sjs-tab-strip-bottom-tab {
border-radius: 4px 4px 0px 0px;
}
```
> **1.** 시트 탭 테두리 반경(border radius) 스타일은 Excel 2007 테마에서는 지원되지 않습니다.
> **2.** 시트 탭의 너비 및 높이 제한으로 인해 radius 값을 너무 크게 설정하지 않도록 주의해야 합니다.
## 새 탭(New Tab) 버튼 표시
`options.newTabVisible` 속성을 사용하여 **새 탭 버튼의 표시 여부**를 설정할 수 있습니다.
이 버튼은 기본적으로 **표시(true)** 상태입니다.
```javascript
spread.options.newTabVisible = true; // false: hide, true: show
```
## 내비게이션 버튼 표시
`options.tabNavigationVisible` 속성을 사용하여 **워크북에서 내비게이션 버튼을 표시할지 여부**를 설정할 수 있습니다.
```javascript
spread.options.tabNavigationVisible = false; // false: hide, true: show
```
## 탭 스트립(Tab Strip) 표시
`options.tabStripVisible` 속성을 사용하여 **전체 탭 스트립을 숨기거나 표시**할 수 있습니다.
```javascript
spread.options.tabStripVisible = true; // true: show, false: hide
spread.options.tabStripRatio = 0.5; // 탭 스트립에 할당된 가로 공간의 비율을 지정하는 값
```
## 위치 및 너비 설정
`tabstripPosition` 워크북 옵션을 사용하여 **탭 스트립의 위치를 워크북 내에서 설정**할 수 있습니다.
이 옵션은 **터치 장치**는 물론 **모든 SpreadJS 테마**에서 지원됩니다.
탭 스트립의 위치를 `left`, `right`, 또는 `top`으로 설정하면 **스크롤바와 탭 스트립이 분리되어 표시**됩니다.
| Position | Image |
| -------- | ----- |
| Bottom (default) |  |
| Left |  |
| Right |  |
| Top |  |
>type=warning
> **참고 : 탭 스트립 위치가** bottom**일 때만** 수평 크기 조절 바(Resize Horizontal Bar) 버튼이 표시됩니다. **tabStripRatio** 속성은 **위(top), 왼쪽(left), 오른쪽(right)** 으로 설정된 경우 **무시됩니다**.
시트 탭 위치가 **왼쪽(left)** 또는 **오른쪽(right)** 으로 설정되어 있고, **시트 이름이 너무 길어 표시되지 않는 경우**, 이름이 **잘리고 말줄임표(...)** 로 표시됩니다. 하지만 `options.tabStripWidth` 속성을 사용하면 **탭 스트립의 너비를 조정하여 전체 시트 이름이 보이도록 할 수 있습니다**. 이 속성의 **기본값 및 최소값은 80px**입니다.
>type=warning
> **참고 :** **options.tabStripWidth** 속성은 탭 스트립의 위치가 워크북의 왼쪽 또는 오른쪽이 아닌 경우 **무시됩니다**.
다음 예제 코드는 탭 스트립의 위치와 너비를 설정하는 방법을 보여줍니다:
```javascript
// 워크북을 생성할 때 탭 스트립의 위치를 변경
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {tabStripPosition: GC.Spread.Sheets.TabStripPosition.top});
// 또는 workbook options 속성을 사용하여 탭 스트립 위치를 변경
spread.options.tabStripPosition = GC.Spread.Sheets.TabStripPosition.top;
// 워크북을 생성할 때 탭 스트립의 너비를 변경
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {tabStripWidth: 200});
// 또는 workbook options 속성을 사용하여 탭 스트립 너비를 변경
spread.options.tabStripWidth = 200;
```
## 모든 시트 버튼
SpreadJS는 탭 스트립에 “모든 시트(All Sheets)” 햄버거 버튼을 제공하여 워크북 내 특정 시트로 더 빠르게 이동할 수 있도록 합니다. 이 버튼을 클릭하면 사용 가능한 시트 목록이 드롭다운으로 열립니다.
“모든 시트” 버튼은 탭 스트립에 모든 시트를 한 번에 표시할 수 없을 때 자동으로 나타납니다. 또한, 탭 스트립 크기를 조절하여 일부 시트를 숨기면 버튼이 표시될 수 있습니다.
[AllSheetsListVisibility](/spreadjs/api/enums/GC.Spread.Sheets.AllSheetsListVisibility) 열거형의 값을 사용하여 `allSheetsListVisible` 옵션을 설정하면, **햄버거 버튼(모든 시트 버튼)의 표시 여부**를 선택할 수 있습니다.
사용 가능한 설정 값은 다음과 같습니다:
* `"hide"`: 버튼을 표시하지 않음
* `"show"`: 항상 버튼을 표시함
* `"auto"` (기본값)
```javascript
// 자동으로 "모든 시트" 버튼 표시/숨김 - 기본
function AutoButton(spread) {
spread.options.allSheetsListVisible = GC.Spread.Sheets.AllSheetsListVisibility.auto;
}
// "모든 시트" 버튼 항상 표시
function ShowButton(spread) {
spread.options.allSheetsListVisible = GC.Spread.Sheets.AllSheetsListVisibility.show;
}
// "모든 시트" 버튼 항상 숨김
function HideButton(spread) {
spread.options.allSheetsListVisible = GC.Spread.Sheets.AllSheetsListVisibility.hide;
}
```
>type=warning
> **참고 : allSheetsListVisible** 옵션의 설정 값과 관계없이, **“모든 시트(All Sheets)” 햄버거 버튼의 위치는 항상 동일하게 유지**됩니다.
아래 표는 “모든 시트” 햄버거 버튼과 관련된 **다양한 동작 시나리오**를 보여줍니다.
| 시나리오 | 예시 |
| ---- | --- |
| **“모든 시트” 대화 상자**에서는 **현재 활성화된 시트**와 **마우스를 올린 시트**가 하이라이트 됩니다. |  |
| **“모든 시트” 버튼**은 마우스를 올리면 **색상이 변경**됩니다. |  |
| **“모든 시트” 대화 상자**에서는 **선택된 모든 활성 시트**가 하이라이트 됩니다. |  |
| 선택한 시트가 현재 탭 스트립에 표시되지 않는 경우, **“모든 시트” 대화 상자에서 시트를 선택하면 해당 시트가 탭 스트립에 표시됩니다.** |  |
| **숨겨진 시트는 “모든 시트” 대화 상자에 표시되지 않습니다.**
예를 들어, 예시 이미지에서 **Sheet4**, **Sheet6**, **Sheet7**은 숨겨진 시트이며, 목록에 표시되지 않습니다. |  |
| “모든 시트(All Sheets)” 대화상자는 검색 상자에 입력을 시작하면 일치하는 시트만 표시하며, 목록에서 첫 번째 일치 시트를 자동으로 선택합니다. (대소문자는 구분하지 않습니다.) |  |
| “모든 시트(All Sheets)” 대화상자는 입력값이 비어 있을 경우 활성 시트와 일치하도록 표시됩니다. |  |
| 워크북이 너무 짧아 “모든 시트(All Sheets)” 대화상자를 완전히 표시할 수 없는 경우, 대화상자는 검색 상자를 자동으로 숨깁니다. |  |
>type=note
> **참고:**
> 검색 기능은 키보드로도 조작할 수 있습니다.
>
> * **위쪽/아래쪽 화살표**: 선택 항목을 위나 아래로 이동합니다.
> * **Enter**: 선택한 워크시트를 활성 시트로 설정합니다.
> * **ESC**: “모든 시트(All Sheets)” 대화상자를 닫습니다.
## SpreadJS 디자이너 사용하기
아래와 같이 **설정(SETTINGS) 리본 탭**에서 **탭 스트립(TabStrip) 설정**에 접근하여, SpreadJS 디자이너에서도 **탭 스트립 옵션을 설정**할 수 있습니다.
