맞춤 테마

앱에 맞게 뷰어 스타일링

뷰어는 임베디드 리소스(viewer.css)와 searchBar.css, annotationBar.css와 같은 기능별 스타일시트를 포함한 중립적인 Bootstrap 기반 외관을 제공합니다. 테마는 세 단계에서 적용됩니다 — 가장 얕은 단계부터 선택하세요.

레벨 1 — 크롬 구성

많은 "테마 지정"은 실제로 구성입니다:

  • ViewerConfig.ShowThumbs = false — 썸네일 패널 없음.
  • ViewerConfig.FitType = "height" | "width" — 페이지가 뷰포트를 채우는 방식.
  • ViewerConfig.ShowThumbs = false와 선택적인 CssConfig/ScriptConfig 번들을 함께 사용 — 호스트가 사용하는 크롬만 유지합니다.

레벨 2 — CSS 재정의

Viewer.ReferenceCss()는 일반 <link> 태그를 출력합니다; 그 뒤에 로드하는 모든 것이 cascade에서 우선합니다. 자신의 스타일시트에서 뷰어의 크기와 프레임을 지정하세요:

css
/* Your stylesheet, loaded after ReferenceCss() */

/* The two containers you own */
#divDocViewer { width: 100%; height: calc(100vh - 48px); }

/* Widget page cards */
.docPage { max-width: none; }

호스트 페이지가 외부 레이아웃을 완전히 제어합니다 — 위젯은 #divDocViewer / #div_ctlDoc에 지정한 어떤 박스 안에서도 렌더링됩니다 (Quick Start의 표준 컨테이너 쌍).

두 가지 실용적인 규칙:

  • Bootstrap을 두 번 로드하지 마세요. 앱에 이미 Bootstrap이 포함되어 있다면 IncludeBootstrapCss/IncludeBootstrap을 생략하고 위젯이 여러분의 것을 상속하도록 하세요 — 이것만으로도 뷰어가 앱에 자연스럽게 보입니다.
  • 사용하는 번들만 포함하세요. 모든 CssConfig/ScriptConfig 플래그는 선택적으로 포함됩니다; 번들이 적을수록 싸워야 할 스타일도 적습니다.

레벨 3 — 자체 툴바 만들기

완전한 브랜드 경험을 위해 위젯을 자체 UI에서 제어하세요 — 이것이 레퍼런스 샘플이 메인 Viewer 툴바를 구축하는 방식입니다. 해당 툴바는 호스트 마크업과 앱 전용 헬퍼로 구성되며, 임베디드 SDK 리본이 아닙니다. 초기화 시 반환되는 docViewer 인스턴스는 여러분의 API 인터페이스이며, 자체 엔드포인트와 함께 사용됩니다:

html
<div id="toolbar">
    <button id="btnOpen">Open</button>
    <button id="btnPrev">‹</button>
    <button id="btnNext">›</button>
    <!-- your design system, your icons -->
</div>
<div id="divDocViewer"><div id="div_ctlDoc"></div></div>

<script>
    const objViewer = $('#div_ctlDoc').docViewer({
        showThumbs: true,
        autoLoad:   false,
        BasePath:   '/',
        ResPath:    'doconut-res/images',
        onViewerReady: () => { /* enable your buttons */ },
        onError: (msg) => console.error('DocViewer:', msg)
    });

    document.getElementById('btnOpen').addEventListener('click', async () => {
        const resp  = await fetch('/api/open?fileName=Sample.pdf', { method: 'POST' });
        const token = await resp.text();
        objViewer.View(token);
    });
</script>

검색 및 주석은 다릅니다: 선택적 Ribbon 구성 요소는 SDK(IncludeSearchBar, IncludeAnnotationBar)에 포함되어 자체 DOM을 생성합니다. 이를 사용자 정의 Viewer 툴바와 함께 사용할 수도 있고, 생략하고 직접 기본 위젯 API를 호출할 수도 있습니다. 전체 통합 순서는 Quick Start의 전체 Viewer 패키지를 참고하세요.

다크 모드 및 RTL

위젯은 다크 테마를 제공하지 않으며, 배경과 테두리에 대한 다크 모드 클래스(예: .dark #divDocViewer { … })를 대상으로 하는 레벨 2 재정을 적용하면 대부분의 요구를 충족합니다. 페이지 콘텐츠 자체는 이미지로 렌더링되기 때문입니다. RTL 호스트의 경우, 뷰어는 RTL 레이아웃 안에서 정상적으로 동작하므로 자체 툴바가 RTL을 인식하도록 유지하세요.

하지 말아야 할 것

임베디드 스타일시트를 포크하거나 수정하지 마세요: 패키지에 포함되어 있으며 매 업데이트 시 교체됩니다. 자체 스타일시트의 재정의는 업그레이드에도 유지되지만 viewer.css를 직접 수정하면 유지되지 않습니다.

이 페이지가 도움이 되었나요?