맞춤 테마

앱에 맞게 뷰어 스타일링

뷰어는 임베드된 리소스(viewer.css, 그리고 searchBar.css와 annotationBar.css와 같은 기능별 스타일시트)에서 제공되는 중립적인 Bootstrap 기반 모양으로 제공됩니다. 테마 적용은 세 단계로 이루어지며, 가장 얕은 단계부터 선택하면 됩니다.

레벨 1 — 크롬 구성

많은 "테마 적용"은 실제로 구성에 불과합니다:

  • ViewerConfig.ShowThumbs = false — 썸네일 패널이 없습니다.
  • ViewerConfig.FitType = "height" | "width" — 페이지가 뷰포트를 채우는 방식.
  • ViewerConfig.ShowThumbs = false together with selective CssConfig/ScriptConfig bundles — 호스트가 사용하는 크롬만 남기도록 선택적인 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>

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

다크 모드 및 RTL

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

하지 말아야 할 것

임베드된 스타일시트를 포크하거나 편집하지 마세요: 패키지 내부에 포함되어 매 업데이트 시 교체됩니다. 자체 스타일시트의 오버라이드는 업그레이드 시에도 유지되지만, viewer.css를 직접 수정하면 유지되지 않습니다.

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