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

툴바 리본

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

기본 리본 모드

image.663647.png

툴바 리본 모드

image.a2032e.png

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

툴바 리본 모드로 전환하기

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>

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

theme11.10f3de.gif

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

툴바 모드에서 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);

다음과 같은 출력이 생성됩니다:

image.5bffba.png

참고: 기본 리본 모드에서 권장되는 리본 높이는 115 또는 미지정입니다. 툴바 리본 모드를 유지하려면 ribbonHeight는 115 미만으로 설정해야 합니다.