Niestandardowe Motywy – Dokumentacja Doconut

Podgląd jest dostarczany w neutralnym, opartym na Bootstrap wyglądzie, udostępnianym z wbudowanych zasobów (viewer.css, oraz arkuszy stylów specyficznych dla funkcji, takich jak searchBar.css i annotationBar.css). Motywowanie odbywa się na trzech poziomach — wybierz najpłytszy, który spełnia Twoje potrzeby.

Poziom 1 — Konfiguracja obramowania

Wiele „motywowania” to w rzeczywistości konfiguracja:

ViewerConfig.ShowThumbs = false — brak panelu miniatur.
ViewerConfig.FitType = "height" | "width" — sposób wypełniania stron w oknie przeglądarki.
ViewerConfig.ShowThumbs = false wraz z selektywnymi pakietami CssConfig/ScriptConfig — zachowaj tylko te elementy interfejsu, które używa Twój host.

Poziom 2 — Nadpisanie CSS

Viewer.ReferenceCss() generuje zwykłe znaczniki <link>; wszystko, co załadujesz po nich, wygrywa w kaskadzie. Określ rozmiar i ramkę podglądu 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 — widget renderuje się wewnątrz dowolnego kontenera, który podasz jako #divDocViewer / #div_ctlDoc (standardowa para kontenerów z Quick Start).

Dwie praktyczne zasady:

Nie ładować Bootstrap dwukrotnie. Jeśli Twoja aplikacja już dostarcza Bootstrap, pomiń IncludeBootstrapCss/IncludeBootstrap i pozwól widgetowi dziedziczyć Twój — to samo w sobie sprawia, że podgląd wygląda natywnie w Twojej aplikacji.
Dołączaj 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 markową prezentację, steruj widgetem z własnego interfejsu — tak dokładnie buduje główny pasek narzędzi podglądu w przykładzie referencyjnym. Ten pasek to znacznik hosta plus specyficzny dla aplikacji pomocnik; 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 podglądu lub pominąć je i samodzielnie wywoływać podstawowe API widgetu. Zobacz kompletny pakiet Viewer w Quick Start, aby poznać pełną kolejność integracji.

Tryb ciemny i RTL

Widget nie dostarcza motywu ciemnego; nadpisanie na poziomie 2, skierowane na klasę trybu ciemnego (np. .dark #divDocViewer { … }) w tle i obramowaniach, pokrywa większość potrzeb, ponieważ sama treść strony jest renderowana jako obrazy. Dla hostów RTL podgląd działa bez problemu w układzie RTL — upewnij się, że Twój własny pasek narzędzi jest świadomy RTL.

Czego nie robić

Nie twórz forka 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.