Niestandardowe Motywy – Doconut Dokumentacja

Przeglądarka jest dostarczana z neutralnym, opartym na Bootstrap wyglądem, pochodzącym z wbudowanych zasobów (viewer.css, oraz arkuszy stylów dla poszczególnych funkcji, takich jak searchBar.css i annotationBar.css). Tematyzacja odbywa się na trzech poziomach — wybierz najpłytszy, który spełni Twoje potrzeby.

Poziom 1 — Konfiguracja obramowania

Wiele „tematyzacji” to w rzeczywistości konfiguracja:

ViewerConfig.ShowThumbs = false — brak panelu miniatur.
ViewerConfig.FitType = "height" | "width" — sposób wypełniania stron w oknie widoku.
ViewerConfig.ShowThumbs = false wraz z selektywnymi pakietami CssConfig/ScriptConfig — zachowaj tylko to obramowanie, którego używa Twój host.

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 — widget renderuje się wewnątrz dowolnego kontenera, który podasz #divDocViewer / #div_ctlDoc (standardowa para kontenerów z Quick Start).

Dwie praktyczne zasady:

Nie ładuj podwójnie Bootstrap. Jeśli Twoja aplikacja już dostarcza Bootstrap, pomiń IncludeBootstrapCss/IncludeBootstrap i pozwól widgetowi dziedziczyć Twój — to samo w sobie 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 markową obsługę, steruj widgetem z własnego interfejsu — tak dokładnie buduje główny pasek narzędzi przeglądarki w przykładzie referencyjnym. 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 — tutaj akcja ViewerApi/Open z Jak działa przeglądarka:

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('/ViewerApi/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 widgetu. Zobacz Quick Start, aby poznać pełną kolejność integracji.

Tryb ciemny i RTL

Widget nie dostarcza tematu ciemnego; nadpisanie na poziomie 2, które celuje w Twoją 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 — zachowaj własny pasek narzędzi ś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.