Niestandardowe Motywy – Doconut Dokumentacja

Przeglądarka jest dostarczana z neutralnym, opartym na Bootstrap wyglądem, udostępnianym z wbudowanych zasobów (viewer.css, plus arkusze stylów per‑funkcjonalności takie jak searchBar.css i annotationBar.css). Motywy są stosowane na trzech poziomach — wybierz najpłytszy, który spełni Twoje potrzeby.

Poziom 1 — Konfiguracja obramowania

Dużo z tego, co nazywamy „motywowaniem”, to tak naprawdę konfiguracja:

ViewerConfig.ShowThumbs = false — brak panelu miniatur.
ViewerConfig.FitType = "height" | "width" — sposób wypełniania stron w oknie podglądu.
ViewerConfig.ShowThumbs = false razem z selektywnymi pakietami CssConfig/ScriptConfig — zachowaj tylko obramowanie używane przez hosta.

Poziom 2 — Nadpisywanie CSS

Viewer.ReferenceCss() generuje zwykłe znaczniki <link>; wszystko, co załadujesz po nich, wygrywa w kaskadzie. Określ rozmiar i ramkę przeglądarki w swoim własnym arkuszu stylów:

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

Strona hosta kontroluje całkowicie zewnętrzny układ — widżet renderuje się wewnątrz dowolnego kontenera, który podasz #divDocViewer / #div_ctlDoc (standardowa para kontenerów z Quick Start).

Dwie praktyczne zasady:

Nie ładuj Bootstrap dwukrotnie. Jeśli Twoja aplikacja już dostarcza Bootstrap, pomiń IncludeBootstrapCss/IncludeBootstrap i pozwól widżetowi dziedziczyć Twój — to samo sprawia, że przeglądarka wygląda natywnie w Twojej aplikacji.
Dołącz tylko używane pakiety. Każda flaga CssConfig/ScriptConfig jest opcjonalna; mniej pakietów, mniej stylów do walki.

Poziom 3 — Zbuduj własny pasek narzędzi

Aby uzyskać w pełni spersonalizowane doświadczenie, steruj widżetem z własnego interfejsu — tak dokładnie działa przykładowa implementacja, która buduje główny pasek narzędzi przeglądarki. Ten pasek to znacznik hosta plus pomocnik specyficzny dla aplikacji; nie jest to wbudowany w SDK Ribbon. Instancja docViewer zwrócona po inicjalizacji jest Twoją powierzchnią API, wraz z własnymi punktami końcowymi:

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>

Wyszukiwanie i adnotacje są inne: ich opcjonalne komponenty Ribbon są wbudowane w SDK (IncludeSearchBar, IncludeAnnotationBar) i generują własny DOM. Możesz używać ich razem z własnym paskiem narzędzi przeglądarki lub pominąć je i samodzielnie wywoływać podstawowe API widżetu. Zobacz kompletny pakiet przeglądarki w Quick Start, aby poznać pełną kolejność integracji.

Tryb ciemny i RTL

Widżet nie dostarcza motywu ciemnego; nadpisanie na poziomie 2, które celuje w klasę trybu ciemnego (np. .dark #divDocViewer { … }) w tle i obramowaniach, pokrywa większość potrzeb, ponieważ zawartość strony jest renderowana jako obrazy. Dla hostów RTL, przeglądarka działa bez problemu w układzie RTL — zapewnij, aby Twój własny pasek narzędzi był świadomy RTL.

Czego nie robić

Nie forkuj ani nie edytuj wbudowanych arkuszy stylów: są one dostarczane w pakiecie i zastępowane przy każdej aktualizacji. Nadpisania w Twoim własnym arkuszu stylów przetrwają aktualizacje; zmiany w viewer.css nie.