Tema Kustom

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.

Level 1 — Konfigurasikan tampilan

Banyak hal yang disebut "theming" sebenarnya hanyalah konfigurasi:

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

Level 2 — Menimpa CSS

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

/* 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).

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; semakin sedikit bundel, semakin sedikit gaya yang harus dihadapi.

Level 3 — Bangun toolbar Anda sendiri

Untuk pengalaman yang sepenuhnya bermerk, kendalikan widget dari UI Anda sendiri — inilah cara contoh referensi membangun toolbar utama Viewer. Toolbar tersebut merupakan markup host ditambah helper khusus aplikasi; bukan Ribbon SDK yang tersemat. Instance docViewer yang dikembalikan oleh inisialisasi adalah antarmuka API Anda, bersama dengan endpoint Anda sendiri — di sini aksi ViewerApi/Open dari Cara Kerja Viewer:

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

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

Mode gelap dan RTL

Widget tidak menyediakan tema gelap; penimpaan Level 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 toolbar 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 di stylesheet Anda sendiri akan bertahan setelah upgrade; perubahan pada viewer.css tidak.