Özel Temalar – Doconut Belgeleri

Görüntüleyici, gömülü kaynaklardan (viewer.css ve searchBar.css, annotationBar.css gibi özellik bazlı stil sayfaları) sunulan nötr, Bootstrap tabanlı bir görünüme sahiptir. Tema oluşturma üç seviyede gerçekleşir — ihtiyacınıza en uygun sığ seviyeyi seçin.

Level 1 — Chrome'u yapılandırın

Birçok “tema” aslında sadece yapılandırmadır:

ViewerConfig.ShowThumbs = false — küçük resim paneli yok.
ViewerConfig.FitType = "height" | "width" — sayfaların görünüm alanını nasıl dolduracağını belirler.
ViewerConfig.ShowThumbs = false ile birlikte seçici CssConfig/ScriptConfig paketleri — yalnızca ana bilgisayarınızın kullandığı çerçeveyi tutun.

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

Viewer.ReferenceCss() düz <link> etiketleri üretir; bunlardan sonra yüklediğiniz her şey katmanlamada üstün gelir. Görüntüleyiciyi kendi stil sayfanızdan boyutlandırın ve çerçeveleyin:

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 bilgisayar sayfası dış düzeni tamamen kontrol eder — widget, #divDocViewer / #div_ctlDoc (Quick Start'tan standart konteyner çifti) içinde verilen kutuya göre render olur.

İki pratik kural:

Bootstrap'ı çift yüklemeyin. Uygulamanız zaten Bootstrap içeriyorsa, IncludeBootstrapCss/IncludeBootstrap atlayın ve widget'ın sizinkini miras almasına izin verin — bu tek başına görüntüleyicinin uygulamanıza doğal görünmesini sağlar.
Yalnızca kullandığınız paketleri ekleyin. Her CssConfig/ScriptConfig bayrağı isteğe bağlıdır; daha az paket, daha az stilyle mücadele demektir.

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

Tamamen markalı bir deneyim için widget'ı kendi UI'nizden yönetin — bu, referans örneğinin ana Viewer araç çubuğunu nasıl oluşturduğunun tam karşılığıdır. Bu araç çubuğu, ana bilgisayar işaretlemesi artı uygulamaya özgü bir yardımcı içerir; gömülü bir SDK Ribbon'ı değildir. Başlatma sırasında döndürülen docViewer örneği API yüzeyinizdir ve kendi uç noktalarınızı ekleyebilirsiniz:

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 (Annotation) farklıdır: isteğe bağlı Ribbon bileşenleri SDK içinde gömülüdür (IncludeSearchBar, IncludeAnnotationBar) ve kendi DOM'larını oluşturur. Bunları kendi özel Viewer araç çubuğunuzla birlikte kullanabilir veya atlayıp doğrudan widget API'lerini kendiniz çağırabilirsiniz. Tam bütünleşme sırası için Tam Viewer paketi Hızlı Başlangıç'ta bölümüne bakın.

Karanlık mod ve RTL

Widget, yerleşik bir karanlık tema sunmaz; bir Level 2 geçersiz kılma ile karanlık‑mod sınıfınıza (ör. .dark #divDocViewer { … }) yönelik arka plan ve kenarlık stilleri eklemek çoğu ihtiyacı karşılar, çünkü sayfa içeriği görüntü olarak render edilir. RTL (sağ‑dan‑sol) ana bilgisayarlar için, görüntüleyici RTL bir düzen içinde sorunsuz çalışır — kendi araç çubuğunuzun da RTL‑duyarlı olmasını sağlayın.

Yapılmaması Gerekenler

Gömülü stil sayfalarını çatallamayın veya düzenlemeyin: paket içinde bulunurlar ve her güncellemede yenileriyle değiştirilir. Kendi stil sayfanızdaki geçersiz kılmalar güncellemelerden etkilenmez; viewer.css üzerindeki düzenlemeler ise etkilenir.