カスタムテーマ

アプリに合わせてビューアのスタイルを調整する

ビューアは、埋め込みリソース（viewer.css と searchBar.css、annotationBar.css などの機能別スタイルシート）から提供される、ニュートラルで Bootstrap ベースの外観で出荷されます。テーマ設定は 3 つのレベルで行われます — 最も浅いレベルから選んでください。

レベル 1 — Chrome の設定

多くの「テーマ設定」は実際には構成です:

  • ViewerConfig.ShowThumbs = false — サムネイルパネルを非表示にします。
  • ViewerConfig.FitType = "height" | "width" — ページがビューポートにどのようにフィットするかを指定します。
  • ViewerConfig.ShowThumbs = false と選択的な CssConfig/ScriptConfig バンドルを組み合わせる — ホストが使用する Chrome のみを保持します。

レベル 2 — CSS の上書き

Viewer.ReferenceCss() はプレーンな <link> タグを出力します；それらの 後 に読み込むものがカスケードで優先されます。独自のスタイルシートでビューアのサイズとフレームを調整してください:

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（クイックスタートの標準コンテナペア）に与えた任意のボックス内に描画されます。

実用的なルールは 2 つ:

  • Bootstrap を二重に読み込まないでください。 アプリがすでに Bootstrap を提供している場合は IncludeBootstrapCss/IncludeBootstrap を省略し、ウィジェットに自分のものを継承させてください — これだけでビューアはアプリにネイティブな外観になります。
  • 使用するバンドルだけを含めてください。 すべての CssConfig/ScriptConfig フラグはオプトインです；バンドルが少なければ少ないほど、対抗すべきスタイルも減ります。

レベル 3 — 独自ツールバーの構築

完全にブランディングされた体験を実現するには、ウィジェットを独自の UI から操作します — これがリファレンスサンプルがメイン Viewer ツールバーを構築する方法です。そのツールバーはホストのマークアップとアプリ固有のヘルパーで構成されており、埋め込み SDK リボンではありません。初期化時に返される docViewer インスタンスが API の入口となり、独自のエンドポイントと組み合わせて使用します — 例として Viewer の仕組み の 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

ウィジェット自体にダークテーマは用意されていませんが、レベル 2 の上書きでダークモード用クラス（例: .dark #divDocViewer { … }）を対象に背景やボーダーを調整すれば、ほとんどの要件を満たせます。RTL 環境でもビューアは問題なく動作します — 独自のツールバーだけ RTL 対応にしてください。

やってはいけないこと

埋め込みスタイルシートをフォークしたり編集したりしないでください。これらはパッケージ内に含まれており、アップデートごとに置き換えられます。独自のスタイルシートでの上書きはアップグレードに耐えますが、viewer.css を直接編集しても効果が失われます。

このページは役に立ちましたか？