Tema Kustom

Gaya penampil agar cocok 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 level — pilih level paling dangkal yang memenuhi kebutuhan Anda.

Tingkat 1 — Konfigurasikan bingkai

  • 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 tag tersebut akan menang dalam urutan cascade. Atur ukuran dan bingkai penampil menggunakan 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 alami pada aplikasi Anda.
  • Sertakan hanya bundel yang Anda gunakan. Setiap flag CssConfig/ScriptConfig bersifat opt-in; semakin sedikit bundel, semakin sedikit gaya yang harus dihadapi.

Tingkat 3 — Bangun bilah alat Anda sendiri

Untuk pengalaman bermerek penuh, kendalikan widget dari UI Anda sendiri — inilah cara contoh referensi membangun bilah alat utama Viewer. Bilah alat tersebut adalah markup host ditambah pembantu khusus aplikasi; bukan Ribbon SDK yang tersemat. Instance docViewer yang dikembalikan oleh inisialisasi adalah permukaan 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 menyediakan 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 memfork atau mengedit stylesheet yang tersemat: mereka disertakan dalam paket dan diganti pada setiap pembaruan. Penimpaan dalam stylesheet Anda sendiri tetap bertahan setelah upgrade; perubahan pada viewer.css tidak.

Apakah halaman ini membantu?