탭 스트립

SpreadJS는 탭 스트립과 그 구성 요소의 동작을 제어할 수 있는 다양한 옵션을 제공합니다.

워크북의 Workbook.options 필드의 속성들을 사용하면 다음과 같은 여러 작업을 수행할 수 있습니다:

• 시트 이름 변경

• 시트 색상 설정

• 시트 정렬

• 탭 스트립의 위치 및 너비 설정 등

시트 이름 변경

시트 이름은 더블 클릭하여 직접 수정할 수 있습니다.

수정 후에는 탭 영역 밖을 클릭하거나, Esc 또는 Enter 키를 눌러 변경을 확정할 수 있습니다.

또한, 시트 이름 편집 기능은 options.tabEditable 속성을 통해 활성화 또는 비활성화할 수 있습니다.

이 속성의 기본값은 true입니다.

spread.options.tabEditable = false; // false: disable, true: enable

시트 탭 정렬하기

탭 스트립에서 시트 이름은 드래그 앤 드롭으로 정렬할 수 있습니다.

시트 탭을 선택한 후 다른 시트들 사이로 드래그하면, 아래 이미지처럼 위치 표시선(인디케이터) 이 나타납니다.

마우스를 놓으면 시트가 해당 위치로 이동됩니다.

시트 탭의 정렬 기능은 options.allowSheetReorder 속성을 true로 설정하여 활성화할 수 있습니다:

spread.options.allowSheetReorder = true; // true: enable, false: disable

또한 시트가 드래그되기 전과 후에 각각 SheetMoving와 SheetMoved 이벤트가 발생합니다:

시트의 이동을 취소하고 싶을 경우, SheetMoving이벤트 핸들러 내에서 cancel 속성을 true로 설정하면 됩니다.

시트 탭 스타일 설정

시트 탭의 상태에 따라 텍스트 스타일, 배경색, 아이콘 등을 설정할 수 있습니다.

시트 탭의 스타일을 설정하려면 Workbook 클래스의 sheetTabStyles 또는 defaultSheetTabStyles 속성을 사용할 수 있습니다.

• sheetTabStyles 속성은 각 시트 탭에 대해 개별 상태 스타일을 적용할 수 있습니다.

• defaultSheetTabStyles 속성은 모든 시트 탭에 대한 기본 상태 스타일을 설정합니다.

아래 이미지는 시트 탭의 다양한 상태에 대해 배경색, 전경색(글자색), 아이콘 등을 설정한 예시를 보여줍니다.

다음 코드 예제는 시트 탭의 다양한 상태에 대한 스타일을 구현한 것입니다.

Ask ChatGPT

// '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 스타일을 통해 커스터마이징할 수 있습니다.

• 시트 탭의 위치에 따라 각각의 시트 탭 외형을 정의하는 전용 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을 갖습니다.

.sjs-tab-strip-bottom-tab{
  border-radius: 4px;
}

2. border-radius에 두 개의 값을 지정하면:

   첫 번째 값은 왼쪽 상단(top-left) 및 오른쪽 하단(bottom-right) 모서리의 radius을 의미하고,

   두 번째 값은 오른쪽 상단(top-right) 및 왼쪽 하단(bottom-left) 모서리의 radius을 의미합니다.

.sjs-tab-strip-bottom-tab{
  border-radius: 0px 5px;
}

3. border-radius에 세 개의 값을 지정하면 다음과 같이 적용됩니다:

   첫 번째 값: 왼쪽 상단(top-left) 모서리

   두 번째 값: 오른쪽 상단(top-right) 및 왼쪽 하단(bottom-left) 모서리

   세 번째 값: 오른쪽 하단(bottom-right) 모서리

.sjs-tab-strip-bottom-tab{
  border-radius: 0px 0px 4px;
}

4. border-radius에 네 개의 값을 지정하면 각각 다음 순서로 적용됩니다:

   첫 번째 값: 왼쪽 상단 (top-left)

   두 번째 값: 오른쪽 상단 (top-right)

   세 번째 값: 오른쪽 하단 (bottom-right)

   네 번째 값: 왼쪽 하단 (bottom-left)

.sjs-tab-strip-bottom-tab {
    border-radius: 4px 4px 0px 0px;
}

새 탭(New Tab) 버튼 표시

options.newTabVisible 속성을 사용하여 새 탭 버튼의 표시 여부를 설정할 수 있습니다.

이 버튼은 기본적으로 표시(true) 상태입니다.

spread.options.newTabVisible = true; // false: hide, true: show

내비게이션 버튼 표시

options.tabNavigationVisible 속성을 사용하여 워크북에서 내비게이션 버튼을 표시할지 여부를 설정할 수 있습니다.

spread.options.tabNavigationVisible = false; // false: hide, true: show

탭 스트립(Tab Strip) 표시

options.tabStripVisible 속성을 사용하여 전체 탭 스트립을 숨기거나 표시할 수 있습니다.

spread.options.tabStripVisible = true; // true: show, false: hide
spread.options.tabStripRatio = 0.5;  // 탭 스트립에 할당된 가로 공간의 비율을 지정하는 값

위치 및 너비 설정

tabstripPosition 워크북 옵션을 사용하여 탭 스트립의 위치를 워크북 내에서 설정할 수 있습니다.

이 옵션은 터치 장치는 물론 모든 SpreadJS 테마에서 지원됩니다.

탭 스트립의 위치를 left, right, 또는 top으로 설정하면 스크롤바와 탭 스트립이 분리되어 표시됩니다.

시트 탭 위치가 왼쪽(left) 또는 오른쪽(right) 으로 설정되어 있고, 시트 이름이 너무 길어 표시되지 않는 경우, 이름이 잘리고 말줄임표(...) 로 표시됩니다.

하지만 options.tabStripWidth 속성을 사용하면 탭 스트립의 너비를 조정하여 전체 시트 이름이 보이도록 할 수 있습니다.

이 속성의 기본값 및 최소값은 80px입니다.

다음 예제 코드는 탭 스트립의 위치와 너비를 설정하는 방법을 보여줍니다:

// 워크북을 생성할 때 탭 스트립의 위치를 변경
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;        

모든 시트(All Sheets) 버튼

SpreadJS는 탭 스트립에 “모든 시트(All Sheets)” 햄버거 버튼을 제공하여, 워크북 내의 특정 시트로 빠르게 이동할 수 있도록 도와줍니다. 이 버튼을 클릭하면 사용 가능한 시트 목록이 드롭다운 형태로 표시됩니다.

“모든 시트” 버튼은 다음과 같은 경우에 자동으로 나타납니다:

• 탭 스트립에 모든 시트가 다 보이지 않을 경우

• 또는 탭 스트립의 크기를 줄여 일부 시트를 숨겼을 경우

AllSheetsListVisibility 열거형의 값을 사용하여 allSheetsListVisible 옵션을 설정하면, 햄버거 버튼(모든 시트 버튼)의 표시 여부를 선택할 수 있습니다.

사용 가능한 설정 값은 다음과 같습니다:

• "hide": 버튼을 표시하지 않음

• "show": 항상 버튼을 표시함

• "auto" (기본값)

// 자동으로 "모든 시트" 버튼 표시/숨김 - 기본 
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;
}

아래 표는 “모든 시트” 햄버거 버튼과 관련된 다양한 동작 시나리오를 보여줍니다.

SpreadJS 디자이너 사용하기

아래와 같이 설정(SETTINGS) 리본 탭에서 탭 스트립(TabStrip) 설정에 접근하여, SpreadJS 디자이너에서도 탭 스트립 옵션을 설정할 수 있습니다.