Tema Kustom

Gaya penampil agar sesuai dengan aplikasi Anda

Penampil dilengkapi dengan tampilan netral berbasis Bootstrap yang disajikan dari sumber daya tersemat (viewer.css, serta stylesheet per-fitur seperti searchBar.css dan annotationBar.css). Penataan tema terjadi pada tiga tingkat — pilih tingkat paling dangkal yang memenuhi kebutuhan Anda.

Tingkat 1 — Konfigurasikan bingkai

Banyak hal yang disebut "theming" sebenarnya hanyalah konfigurasi:

  • ViewerConfig.ShowThumbs = false — tidak ada panel thumbnail.
  • ViewerConfig.FitType = "height" | "width" — cara halaman mengisi viewport.
  • ViewerConfig.ShowThumbs = false bersama dengan bundel CssConfig/ScriptConfig selektif — pertahankan hanya bingkai yang digunakan host Anda.

Tingkat 2 — Timpa CSS

Viewer.ReferenceCss() menghasilkan tag <link> biasa; apa pun yang Anda muat setelah mereka akan menang dalam cascade. Atur ukuran dan bingkai penampil dari stylesheet Anda sendiri:

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

Halaman host mengendalikan tata letak luar sepenuhnya — widget merender di dalam kotak apa pun yang Anda berikan pada #divDocViewer / #div_ctlDoc (pasangan kontainer standar dari Quick Start).

Dua aturan praktis:

  • Jangan memuat Bootstrap dua kali. Jika aplikasi Anda sudah menyertakan Bootstrap, lewati IncludeBootstrapCss/IncludeBootstrap dan biarkan widget mewarisi milik Anda — hal ini saja membuat penampil tampak asli pada aplikasi Anda.
  • Sertakan hanya bundel yang Anda gunakan. Setiap flag CssConfig/ScriptConfig bersifat opt‑in; lebih sedikit bundel, lebih sedikit gaya yang harus dihadapi.

Tingkat 3 — Bangun bilah alat Anda sendiri

Untuk pengalaman bermerk penuh, kendalikan widget dari UI Anda sendiri — inilah cara contoh referensi membangun bilah alat Viewer utama. Bilah alat tersebut adalah markup host ditambah pembantu khusus aplikasi; bukan Ribbon SDK yang tersemat. Instance docViewer yang dikembalikan oleh inisialisasi adalah antarmuka API Anda, bersama dengan endpoint Anda sendiri:

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>

Pencarian dan Anotasi berbeda: komponen Ribbon opsional mereka tersemat dalam SDK (IncludeSearchBar, IncludeAnnotationBar) dan menghasilkan DOM mereka sendiri. Anda dapat menggunakannya bersama bilah alat Viewer khusus Anda atau melewatkannya dan memanggil API widget yang mendasarinya secara langsung. Lihat paket Viewer lengkap di Quick Start untuk urutan integrasi lengkap.

Mode gelap dan RTL

Widget tidak menyertakan tema gelap; penimpaan Tingkat 2 yang menargetkan kelas mode‑gelap Anda (mis. .dark #divDocViewer { … }) pada latar belakang dan batas mencakup sebagian besar kebutuhan, karena konten halaman sendiri dirender sebagai gambar. Untuk host RTL, penampil berfungsi dengan baik di dalam tata letak RTL — pastikan bilah alat Anda menyadari RTL.

Apa yang tidak boleh dilakukan

Jangan mem‑fork atau mengedit stylesheet yang tersemat: mereka disertakan dalam paket dan diganti pada setiap pembaruan. Penimpaan di stylesheet Anda sendiri bertahan melalui peningkatan; perubahan pada viewer.css tidak.

Apakah halaman ini membantu?