Vlastní motivy

Upravte vzhled prohlížeče tak, aby odpovídal vaší aplikaci

Prohlížeč je dodáván s neutrálním vzhledem založeným na Bootstrapu, který je poskytován z vložených zdrojů (viewer.css, plus style sheety pro jednotlivé funkce jako searchBar.css a annotationBar.css). Tématizace probíhá ve třech úrovních – vyberte nejméně zásadní, která vás dovede k cíli.

Úroveň 1 — Konfigurace chrome

Mnoho „tématizace“ je ve skutečnosti konfigurace:

  • ViewerConfig.ShowThumbs = false — žádný panel miniatur.
  • ViewerConfig.FitType = "height" | "width" — jak stránky vyplňují viewport.
  • ViewerConfig.ShowThumbs = false together with selective CssConfig/ScriptConfig bundles — ponechte jen chrome, který používá váš hostitel.

Úroveň 2 — Přepsání CSS

Viewer.ReferenceCss() generuje jednoduché <link> tagy; vše, co načtete po nich, získá výhodu v kaskádě. Nastavte velikost a rámec prohlížeče ve vlastní stylové šabloně:

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; }

Hostitelská stránka plně řídí vnější rozvržení — widget se vykresluje uvnitř libovolného kontejneru, který přiřadíte #divDocViewer / #div_ctlDoc (standardní dvojice kontejnerů z Quick Start).

Dvě praktická pravidla:

  • Nenačítejte Bootstrap dvakrát. Pokud vaše aplikace již Bootstrap obsahuje, vynechte IncludeBootstrapCss/IncludeBootstrap a nechte widget zdědit ten váš — to samo o sobě způsobí, že prohlížeč bude vypadat jako součást vaší aplikace.
  • Zahrnujte jen balíčky, které používáte. Každý příznak CssConfig/ScriptConfig je volitelný; méně balíčků, méně stylů, se kterými se musíte potýkat.

Úroveň 3 — Vytvořte si vlastní panel nástrojů

Pro plně značkový zážitek ovládejte widget z vlastní UI — takto přesně funguje referenční ukázka při tvorbě hlavního panelu nástrojů Vieweru. Tento panel je hostitelský markup plus aplikací specifický pomocník; není to vložený SDK Ribbon. Instance docViewer vrácená inicializací představuje vaše API, spolu s vašimi vlastními koncovými body:

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>

Vyhledávání a anotace jsou odlišné: jejich volitelné komponenty Ribbon jsou vloženy v SDK (IncludeSearchBar, IncludeAnnotationBar) a generují vlastní DOM. Můžete je použít společně s vaším vlastním panelem nástrojů Vieweru nebo je vynechat a volat podkladové API widgetu sami. Viz kompletní balíček Vieweru v Quick Start pro kompletní pořadí integrace.

Tmavý režim a RTL

Widget nedodává tmavý motiv; přepsání na úrovni 2, které cílí na vaši třídu pro tmavý režim (např. .dark #divDocViewer { … }) pro pozadí a okraje pokrývá většinu potřeb, protože samotný obsah stránky je vykreslen jako obrázek. Pro hostitele s RTL layoutem widget funguje bez problémů uvnitř RTL rozvržení — ujistěte se, že váš vlastní panel nástrojů je RTL‑vědomý.

Co nedělat

Neforkujte ani neupravujte vložené style sheety: jsou součástí balíčku a při každé aktualizaci jsou nahrazeny. Přepsání ve vaší vlastní stylové šabloně přežije aktualizace; úpravy viewer.css ne.

Byla tato stránka užitečná?