Temi Personalizzati – Doconut Documentazione

Il visualizzatore viene fornito con un aspetto neutro, basato su Bootstrap, servito dalle risorse incorporate (viewer.css, più fogli di stile per funzionalità 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 l'interfaccia

Gran parte della “tematizzazione” è in realtà configurazione:

ViewerConfig.ShowThumbs = false — nessun pannello miniature.
ViewerConfig.FitType = "height" | "width" — come le pagine riempiono la finestra.
ViewerConfig.ShowThumbs = false insieme a bundle selettivi CssConfig/ScriptConfig — conserva solo l'interfaccia che il tuo host utilizza.

Livello 2 — Sovrascrivi il CSS

Viewer.ReferenceCss() genera semplici tag <link>; tutto ciò che carichi dopo di essi vince la cascata. Imposta dimensioni e cornice del visualizzatore dal tuo foglio di stile:

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 di qualsiasi contenitore tu 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 utilizzi. Ogni flag CssConfig/ScriptConfig è opzionale; meno bundle, meno stili da gestire.

Livello 3 — Costruisci la tua barra degli strumenti

Per un'esperienza completamente brandizzata, controlla il widget dalla tua UI — è esattamente così che il campione di riferimento costruisce la barra degli strumenti principale del Viewer. Quella barra è markup dell'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:

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 del Viewer o saltarli e chiamare direttamente le API del widget sottostante. Vedi il pacchetto completo del Viewer nel 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 (ad es. .dark #divDocViewer { … }) su sfondi e bordi copre la maggior parte delle esigenze, poiché il contenuto della pagina è renderizzato come immagine. Per gli host RTL, il visualizzatore funziona perfettamente all'interno di un layout RTL — mantieni la tua barra degli strumenti consapevole dell'RTL.

Cosa non fare

Non fare fork o modificare i fogli di stile incorporati: vengono forniti all'interno del pacchetto e vengono sostituiti ad ogni aggiornamento. Le sovrascritture nel tuo foglio di stile sopravvivono agli upgrade; le modifiche a viewer.css no.