Özel Temalar – Doconut Belgeleri

Görüntüleyici, gömülü kaynaklardan (viewer.css, plus per-feature stylesheets like searchBar.css and annotationBar.css) sunulan nötr, Bootstrap tabanlı bir görünüme sahiptir. Temalandırma üç seviyede gerçekleşir — sizi oraya götüren en sığ seviyeyi seçin.

Seviye 1 — Çerçeveyi yapılandırın

ViewerConfig.ShowThumbs = false — küçük resim paneli yok.
ViewerConfig.FitType = "height" | "width" — sayfaların görünüm alanını nasıl doldurduğu.
ViewerConfig.ShowThumbs = false ile seçici CssConfig/ScriptConfig paketlerini birleştirerek — yalnızca ana makinenizin kullandığı çerçeveyi tutun.

Seviye 2 — CSS'i geçersiz kılın

Viewer.ReferenceCss() düz <link> etiketleri üretir; onlardan sonra yüklediğiniz her şey katmanda üstünlük sağlar. Görüntüleyicinin boyutunu ve çerçevesini kendi stil sayfanızdan ayarlayın:

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

Ana sayfa dış düzeni tamamen kontrol eder — widget, #divDocViewer / #div_ctlDoc (Quick Start'tan standart konteyner çifti) verdiğiniz kutunun içinde render eder.

Bootstrap'ı iki kez yüklemeyin. Uygulamanız zaten Bootstrap içeriyorsa, IncludeBootstrapCss/IncludeBootstrap'i atlayın ve widget'in sizinkini devralmasına izin verin — bu tek başına görüntüleyicinin uygulamanıza özgün görünmesini sağlar.

Sadece kullandığınız paketleri ekleyin. Her CssConfig/ScriptConfig bayrağı isteğe bağlıdır; daha az paket, mücadele edecek daha az stil demektir.

Seviye 3 — Kendi araç çubuğunuzu oluşturun

Tamamen markalı bir deneyim için, widget'i kendi UI'nizden yönetin — bu, referans örneğinin ana Viewer araç çubuğunu nasıl oluşturduğunun tam olarak aynısıdır. Bu araç çubuğu, ana makine işaretlemesi ve uygulamaya özgü bir yardımcıdan oluşur; gömülü bir SDK Ribbon'ı değildir. Başlatma tarafından döndürülen docViewer örneği, API yüzeyiniz ve kendi uç noktalarınızdır:

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>

Arama ve Açıklama farklıdır: isteğe bağlı Ribbon bileşenleri SDK'ya (IncludeSearchBar, IncludeAnnotationBar) gömülüdür ve kendi DOM'larını oluşturur. Bunları özel Viewer araç çubuğunuzla birlikte kullanabilir veya atlayıp temel widget API'lerini kendiniz çağırabilirsiniz. Tam entegrasyon sırası için Quick Start'taki tam Viewer paketi bölümüne bakın.

Karanlık mod ve RTL

Widget bir karanlık tema sunmaz; arka planlar ve kenarlıklar için karanlık-mod sınıfınızı (ör. .dark #divDocViewer { … }) hedefleyen Seviye 2 geçersiz kılma çoğu ihtiyacı karşılar, çünkü sayfa içeriği görüntü olarak render edilir. RTL ana makineleri için, görüntüleyici RTL bir düzen içinde sorunsuz çalışır — kendi araç çubuğunuzun RTL farkındalığını koruyun.

Yapılmaması Gerekenler

Gömülü stil sayfalarını çatallamayın veya düzenlemeyin: paket içinde gelirler ve her güncellemede değiştirilirler. Kendi stil sayfanızdaki geçersiz kılmalar yükseltmelerde kalır; viewer.css üzerindeki düzenlemeler ise kalmaz.