맞춤 테마

앱에 맞게 뷰어 스타일링

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

레벨 1 — 크롬 구성

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

  • ViewerConfig.ShowThumbs = false — 썸네일 패널 없음.
  • ViewerConfig.FitType = "height" | "width" — 페이지가 뷰포트를 채우는 방식.
  • ViewerConfig.ShowThumbs = false together with selective CssConfig/ScriptConfig bundles — 호스트가 사용하는 크롬만 유지합니다.

레벨 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 인터페이스이며, 자체 엔드포인트와 함께 사용됩니다 — 여기서는 뷰어 작동 방식에서 ViewerApi/Open 액션을 예시로 보여줍니다.

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('/ViewerApi/Open?fileName=Sample.pdf', { method: 'POST' });
        const token = await resp.text();
        objViewer.View(token);
    });
</script>

검색 및 주석은 다릅니다: 선택적 리본 컴포넌트가 SDK(IncludeSearchBar, IncludeAnnotationBar)에 포함되어 자체 DOM을 생성합니다. 이를 맞춤 Viewer 툴바와 함께 사용할 수도 있고, 건너뛰고 직접 기본 위젯 API를 호출할 수도 있습니다. 전체 통합 순서는 빠른 시작 를 참고하세요.

다크 모드 및 RTL

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

하지 말아야 할 것

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

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