Niestandardowe motywy

Stylizuj przeglądarkę, aby pasowała do Twojej aplikacji

Przeglądarka jest dostarczana z neutralnym, opartym na Bootstrap wyglądem, pochodzącym z wbudowanych zasobów (viewer.css, oraz arkuszy stylów per‑funkcjonalność, takich jak searchBar.css i annotationBar.css). Motywy można definiować na trzech poziomach — wybierz najpłytszy, który spełni Twoje wymagania.

Poziom 1 — Konfiguracja obramowania

Wiele „motywowania” to tak naprawdę konfiguracja:

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

Poziom 2 — Nadpisanie CSS

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

css
/* Twój arkusz stylów, ładowany po ReferenceCss() */

/* Dwa kontenery, które posiadasz */
#divDocViewer { width: 100%; height: calc(100vh - 48px); }

/* Karty stron widgetu */
.docPage { max-width: none; }

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

Dwie praktyczne zasady:

  • Nie ładuj podwójnie Bootstrap. Jeśli Twoja aplikacja już korzysta z Bootstrap, pomiń IncludeBootstrapCss/IncludeBootstrap i pozwól widgetowi dziedziczyć Twój styl — to samo sprawi, że przeglądarka będzie wyglądać naturalnie w Twojej aplikacji.
  • Dołącz tylko potrzebne 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 właśnie działa przykładowy kod referencyjny, który buduje główny pasek narzędzi Viewer. Ten pasek to znacznik hosta plus pomocnik specyficzny dla aplikacji; nie jest to wbudowany pasek 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>
    <!-- Twój system projektowy, Twoje ikony -->
</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: () => { /* włącz swoje przyciski */ },
        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 działają inaczej: ich opcjonalne komponenty Ribbon są wbudowane w SDK (IncludeSearchBar, IncludeAnnotationBar) i generują własny DOM. Możesz je używać razem z własnym paskiem narzędzi Viewer lub pominąć i wywołać bezpośrednio odpowiednie API widgetu. Zobacz kompletny pakiet Viewer w Quick Start aby poznać pełną kolejność integracji.

Tryb ciemny i RTL

Widget nie dostarcza własnego motywu ciemnego; nadpisanie na poziomie 2, skierowane do klasy trybu ciemnego (np. .dark #divDocViewer { … }) w kwestii tła i obramowań, pokrywa większość potrzeb, ponieważ samą treść strony renderuje się jako obraz. Dla hostów RTL przeglądarka działa bez problemu w układzie RTL — zadbaj, 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 częścią pakietu i są zastępowane przy każdej aktualizacji. Nadpisania w Twoim własnym arkuszu stylów przetrwają aktualizacje; modyfikacje viewer.css nie przetrwają.

Czy ta strona była pomocna?