Vlastní motivy

Styling prohlížeče tak, aby ladil s vaší aplikací

Prohlížeč je dodáván s neutrálním vzhledem založeným na Bootstrapu, poskytovaným z vložených zdrojů (viewer.css a doplňkových stylů jako searchBar.css a annotationBar.css). Tématizace probíhá ve třech úrovních – vyberte nejméně zásadní, která vám vyhovuje.

Úroveň 1 — Nastavení chrome

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

  • ViewerConfig.ShowThumbs = false — žádný panel miniatur.
  • ViewerConfig.FitType = "height" | "width" — jak stránky vyplňují oblast zobrazení.
  • ViewerConfig.ShowThumbs = false spolu se selektivními balíčky CssConfig/ScriptConfig — ponechte jen chrome, který vaše hostitel používá.

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

Viewer.ReferenceCss() generuje jednoduché <link> značky; vše, co načtete po nich, získá přednost v kaskádě. Nastavte velikost a rámeček 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ý zadáte #divDocViewer / #div_ctlDoc (standardní dvojice kontejnerů z Rychlého startu).

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č vypadá 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čkovanou zkušenost ovládejte widget z vlastní UI – přesně takto referenční ukázka vytváří hlavní panel 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 – zde akce ViewerApi/Open z Jak funguje Viewer:

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>

Hledá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 vlastním panelem nástrojů Vieweru nebo je vynechat a volat podkladová API widgetu sami. Viz Rychlý start pro kompletní pořadí integrace.

Dark mode a RTL

Widget nedodává tmavý motiv; přepsání na úrovni 2, zaměřené 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 prohlížeč 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é soubory stylů: 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á?