Anpassade teman

Visaren levereras med ett neutralt, Bootstrap-baserat utseende som serveras från de inbäddade resurserna (viewer.css, samt per-funktionsstilmallar som searchBar.css och annotationBar.css). Tematisering sker på tre nivåer — välj den grundläggande som räcker för ditt behov.

Nivå 1 — Konfigurera ramverket

Mycket av ”tematisering” är egentligen konfiguration:

• ViewerConfig.ShowThumbs = false — ingen miniatyrpanel.
• ViewerConfig.FitType = "height" | "width" — hur sidor fyller visningsområdet.
• ViewerConfig.ShowThumbs = false tillsammans med selektiva CssConfig/ScriptConfig-paket — behåll bara det ramverk som din värd använder.

Nivå 2 — Överskriv CSS

Viewer.ReferenceCss() genererar enkla <link>-taggar; allt du laddar efter dem vinner i kaskaden. Storlek och ram för visaren från din egen stilfil:

/* Your stylesheet, loaded after ReferenceCss() */

/* The two containers you own */
#divDocViewer { width: 100%; height: calc(100vh - 48px); }

/* Widget page cards */
.docPage { max-width: none; }

Värdsidan styr den yttre layouten helt — widgeten renderas inuti vilken ruta du än ger #divDocViewer / #div_ctlDoc (det standardbehållarparet från Quick Start).

Två praktiska regler:

• Ladda inte Bootstrap två gånger. Om din app redan levererar Bootstrap, hoppa över IncludeBootstrapCss/IncludeBootstrap och låt widgeten ärva din — detta ensamt får visaren att se inbyggd i din app ut.
• Inkludera bara de paket du använder. Varje CssConfig/ScriptConfig-flagga är valfri; färre paket, färre stilar att hantera.

Nivå 3 — Bygg ditt eget verktygsfält

För en helt varumärkesanpassad upplevelse, styr widgeten från ditt eget UI — så bygger referensexemplet exakt sitt huvudverktygsfält för Viewer. Det verktygsfältet är värdmärkup plus en app-specifik hjälpare; det är inte ett inbäddat SDK-ribbon. docViewer-instansen som returneras vid initiering är ditt API-ytlager, tillsammans med dina egna slutpunkter:

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

Sök och Anmärkning är annorlunda: deras valfria Ribbon-komponenter är inbäddade i SDK:n (IncludeSearchBar, IncludeAnnotationBar) och genererar sin egen DOM. Du kan använda dem tillsammans med ditt anpassade Viewer-verktygsfält eller hoppa över dem och anropa de underliggande widget-API:erna själv. Se den fullständiga Viewer-paketet i Quick Start för den kompletta integrationsordningen.

Mörkt läge och RTL

Widgeten levereras inte med ett mörkt tema; en Nivå 2‑överskrivning som riktar sig mot din mörkt‑läge‑klass (t.ex. .dark #divDocViewer { … }) för bakgrunder och kanter täcker de flesta behov, eftersom sidans innehåll själv renderas som bild. För RTL‑värdar fungerar visaren utan problem i en RTL‑layout — håll ditt eget verktygsfält RTL‑medvetet.

Vad du inte bör göra

Forka eller redigera inte de inbäddade stilfilerna: de levereras i paketet och ersätts vid varje uppdatering. Överskrivningar i din egen stilfil överlever uppgraderingar; ändringar i viewer.css gör det inte.