맞춤 테마

앱에 맞게 뷰어 스타일링

뷰어는 임베디드 리소스(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>

Search와 Annotation은 다릅니다: 선택적 리본 컴포넌트가 SDK(IncludeSearchBar, IncludeAnnotationBar)에 내장되어 자체 DOM을 생성합니다. 이를 커스텀 Viewer 툴바와 함께 사용하거나 건너뛰고 직접 위젯 API를 호출할 수 있습니다. 전체 통합 순서는 Quick Start의 전체 Viewer 패키지를 참고하세요.

다크 모드 및 RTL

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

하지 말아야 할 것

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

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