# 툴바 리본
## Content
SpreadJS 디자이너 컴포넌트는 아래와 같이 두 가지 리본 모드를 제공합니다:
**기본 리본 모드**
**툴바 리본 모드**
툴바 리본 모드는 특히 모바일 기기에서 유용합니다.
## 툴바 리본 모드로 전환하기
SpreadJS 디자이너 컴포넌트는 기본 리본 모드로 실행됩니다. 하지만 [빠른 시작](/spreadjs/docs/v19/spreadjs-designer-component/quick-start-designer)의 단계를 따라 setConfig 메서드에서 GC.Spread.Sheets.Designer.ToolbarModeConfig를 설정하여 툴바 리본 모드로 전환할 수 있습니다. 아래 예시를 참고하세요.
```JavaScript
// 기본 리본 모드로 디자이너 컴포넌트 초기화하기
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById('designerHost'));
// 툴바 리본 모드로 전환하기
designer.setConfig(GC.Spread.Sheets.Designer.ToolBarModeConfig);
```
## 기본 리본 모드와 툴바 리본 모드 간 전환하기
다음 코드 샘플은 기본 리본 모드와 툴바 리본 모드 간 전환하는 방법을 보여줍니다.
```HTML
```
아래와 같은 결과가 생성됩니다:
## 툴바 모드에서 리본 높이 설정
툴바 모드에서 `ribbonHeight` 옵션을 사용하여 리본 높이를 설정할 수 있습니다. 툴바 모드에서 `ribbonHeight`의 기본값이며 권장값은 50입니다.
다음 코드 샘플은 리본 높이를 80으로 설정합니다.
```JavaScript
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
var config = GC.Spread.Sheets.Designer.ToolBarModeConfig;
// 리본 높이 설정
config.ribbon.ribbonHeight = 80;
// 사용자 정의 설정 적용
designer.setConfig(config);
```
다음과 같은 출력이 생성됩니다:
> **참고:** 기본 리본 모드에서 권장되는 리본 높이는 115 또는 미지정입니다. 툴바 리본 모드를 유지하려면 `ribbonHeight`는 115 미만으로 설정해야 합니다.