Temi Personalizzati – Doconut Documentazione

Il visualizzatore viene fornito con un aspetto neutro, basato su Bootstrap, servito dalle risorse incorporate (viewer.css, più i fogli di stile per funzionalità specifiche come searchBar.css e annotationBar.css). La tematizzazione avviene su tre livelli — scegli quello più superficiale che ti porta al risultato desiderato.

Livello 1 — Configura la chrome

Molto del "theming" è in realtà configurazione:

ViewerConfig.ShowThumbs = false — nessun pannello di miniature.
ViewerConfig.FitType = "height" | "width" — come le pagine riempiono la viewport.
ViewerConfig.ShowThumbs = false insieme a bundle selettivi CssConfig/ScriptConfig — mantieni solo la chrome che il tuo host utilizza.

Livello 2 — Sovrascrivi il CSS

Viewer.ReferenceCss() emette normali tag <link>; tutto ciò che carichi dopo di essi vince la cascata. Dimensiona e incornicia il visualizzatore dal tuo foglio di stile personale:

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

La pagina host controlla completamente il layout esterno — il widget viene renderizzato all'interno della casella che assegni a #divDocViewer / #div_ctlDoc (la coppia di contenitori standard del Quick Start).

Due regole pratiche:

Non caricare due volte Bootstrap. Se la tua app include già Bootstrap, ometti IncludeBootstrapCss/IncludeBootstrap e lascia che il widget erediti il tuo — questo da solo fa apparire il visualizzatore nativo alla tua app.
Includi solo i bundle che usi. Ogni flag CssConfig/ScriptConfig è opt-in; meno bundle, meno stili da gestire.

Livello 3 — Costruisci la tua barra degli strumenti

Per un'esperienza completamente brandizzata, guida il widget dalla tua UI — è esattamente così che il campione di riferimento costruisce la barra degli strumenti principale del Viewer. Quella barra è markup host più un helper specifico dell'app; non è un Ribbon SDK incorporato. L'istanza docViewer restituita dall'inizializzazione è la tua superficie API, insieme ai tuoi endpoint personalizzati:

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>

Search e Annotation sono diversi: i loro componenti Ribbon opzionali sono incorporati nell' SDK (IncludeSearchBar, IncludeAnnotationBar) e generano il proprio DOM. Puoi usarli insieme alla tua barra degli strumenti personalizzata o saltarli e chiamare direttamente le API del widget. Vedi il pacchetto completo del Viewer in Quick Start per l'ordine completo di integrazione.

Modalità scura e RTL

Il widget non fornisce un tema scuro; una sovrascrittura di Livello 2 che mira alla tua classe dark‑mode (es. .dark #divDocViewer { … }) su sfondi e bordi copre la maggior parte delle esigenze, poiché il contenuto della pagina stesso è renderizzato come immagine. Per host RTL, il visualizzatore funziona tranquillamente all'interno di un layout RTL — mantieni la tua barra degli strumenti consapevole del RTL.

Cosa non fare

Non forkare o modificare i fogli di stile incorporati: sono inclusi nel pacchetto e vengono sostituiti ad ogni aggiornamento. Le sovrascritture nel tuo foglio di stile sopravvivono agli upgrade; le modifiche a viewer.css no.