# 리본 모드 ## Content SpreadJS 디자이너 컴포넌트는 아래와 같이 두 가지 리본 모드를 제공합니다. **기본 리본 모드** ![SpreadJS Designer displays the Default Ribbon Mode with full tabs and command groups for desktop spreadsheet editing workflows.](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.663647.png?width=1200) **도구 모음 리본 모드** ![SpreadJS Designer displays the compact Toolbar Ribbon Mode, providing a mobile-friendly spreadsheet editing UI with essential commands.](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.a2032e.png?width=1200) 도구 모음 리본 모드는 특히 모바일 장치에서 유용합니다. ## 도구 모음 리본 모드로 전환 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('designerHost'); // 도구 모음 리본 모드로 전환 designer.setConfig(GC.Spread.Sheets.Designer.ToolBarModeConfig); ``` ## 기본 리본 모드와 도구 모음 리본 모드 간 전환 다음 코드 샘플은 기본 리본 모드와 도구 모음 리본 모드 간에 전환하는 방법을 보여줍니다. ```HTML
``` 아래와 같은 결과가 생성됩니다. ![SpreadJS Designer switches between default and toolbar ribbon modes through the setConfig method, updating the ribbon UI after each button command.](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/theme11.10f3de.gif?width=1200) ## 도구 모음 모드에서 리본 높이 설정 도구 모음 구성의 `ribbonHeight` 옵션을 사용하여 도구 모음 모드에서 리본 높이를 설정할 수 있습니다. 도구 모음 모드에서 `ribbonHeight`의 기본값 및 권장값은 50입니다. 다음 코드 샘플은 리본 높이를 80으로 설정합니다. ```JavaScript var designer = new GC.Spread.Sheets.Designer.Designer("designerHost"); var config = GC.Spread.Sheets.Designer.ToolBarModeConfig; // 리본 높이 설정 config.ribbon.ribbonHeight = 80; // 사용자 지정 구성 설정 designer.setConfig(config); ``` 아래와 같은 결과가 생성됩니다. ![SpreadJS Designer Toolbar Ribbon Mode displays a customized ribbon height of 80 through the ribbonHeight configuration property.](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/image.5bffba.png?width=1200) > **참고:** 기본 리본 모드의 권장 리본 높이는 115이거나 정의하지 않는 것입니다. 도구 모음 리본 모드를 유지하려면 `ribbonHeight`를 115보다 작은 값으로 설정해야 합니다.