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

툴바 리본

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

기본 리본 모드



툴바 리본 모드



툴바 리본 모드는 특히 모바일 기기에서 유용합니다.

툴바 리본 모드로 전환하기

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

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

// 툴바 리본 모드로 전환하기
designer.setConfig(GC.Spread.Sheets.Designer.ToolBarModeConfig);

기본 리본 모드와 툴바 리본 모드 간 전환하기

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

    <script>
        window.onload = function () {

            var switchConfig = true;

            var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("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 element-->
    <div id="designerHost" style="width:100%; height:400px;border: 1px solid gray;"></div>
    <button id="btn">Switch Mode</button>

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


툴바 모드에서 리본 높이 설정

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

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

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 미만으로 설정해야 합니다.