[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

리본 모드

SpreadJS 디자이너 컴포넌트는 아래와 같이 두 가지 리본 모드를 제공합니다.

기본 리본 모드

SpreadJS Designer displays the Default Ribbon Mode with full tabs and command groups for desktop spreadsheet editing workflows.

도구 모음 리본 모드

SpreadJS Designer displays the compact Toolbar Ribbon Mode, providing a mobile-friendly spreadsheet editing UI with essential commands.

도구 모음 리본 모드는 특히 모바일 장치에서 유용합니다.

도구 모음 리본 모드로 전환

SpreadJS 디자이너 컴포넌트는 기본 리본 모드로 실행됩니다. 하지만 빠른 시작의 단계에 따라 아래와 같이 setConfig 메서드에 GC.Spread.Sheets.Designer.ToolbarModeConfig를 설정하여 도구 모음 리본 모드로 전환할 수 있습니다.

// 기본 리본 모드로 디자이너 컴포넌트 초기화
var designer = new GC.Spread.Sheets.Designer.Designer('designerHost');

// 도구 모음 리본 모드로 전환
designer.setConfig(GC.Spread.Sheets.Designer.ToolBarModeConfig);

기본 리본 모드와 도구 모음 리본 모드 간 전환

다음 코드 샘플은 기본 리본 모드와 도구 모음 리본 모드 간에 전환하는 방법을 보여줍니다.

    <script>
        window.onload = function () {

            var switchConfig = true;

            var designer = new GC.Spread.Sheets.Designer.Designer("designerHost");

            document.getElementById('btn').addEventListener('click', function () {
                designer.setConfig(switchConfig ? GC.Spread.Sheets.Designer.ToolBarModeConfig : GC.Spread.Sheets.Designer.DefaultConfig);
                switchConfig = !switchConfig;
            });

        }
    </script>
</head>
<body>
    <!--DOM 요소-->
    <div id="designerHost" style="width:100%; height:400px;border: 1px solid gray;"></div>
    <button id="btn">모드 전환</button>

아래와 같은 결과가 생성됩니다.

SpreadJS Designer switches between default and toolbar ribbon modes through the setConfig method, updating the ribbon UI after each button command.

도구 모음 모드에서 리본 높이 설정

도구 모음 구성의 ribbonHeight 옵션을 사용하여 도구 모음 모드에서 리본 높이를 설정할 수 있습니다. 도구 모음 모드에서 ribbonHeight의 기본값 및 권장값은 50입니다.

다음 코드 샘플은 리본 높이를 80으로 설정합니다.

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.

참고: 기본 리본 모드의 권장 리본 높이는 115이거나 정의하지 않는 것입니다. 도구 모음 리본 모드를 유지하려면 ribbonHeight를 115보다 작은 값으로 설정해야 합니다.