Özel Temalar

Görüntüleyiciyi uygulamanıza uyacak şekilde stil verin

Görüntüleyici, gömülü kaynaklardan (viewer.css, ayrıca searchBar.css ve 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 — sizi oraya götürecek en sığ seviyeyi seçin.

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

Çok sayıda "tema" aslında 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 doldurduğu.
  • ViewerConfig.ShowThumbs = false ve seçici CssConfig/ScriptConfig paketleri birlikte — yalnızca ana bilgisayarınızın kullandığı çerçeveyi tutun.

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

Viewer.ReferenceCss() düz <link> etiketleri üretir; onlardan sonra yüklediğiniz her şey kademeyi kazanır. 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 gelen standart konteyner çifti) verdiğiniz kutunun içinde renderlanır.

İki pratik kural:

  • 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 doğal 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 kendisidir. Bu araç çubuğu, ana bilgisayar işaretlemesi artı uygulamaya özgü bir yardımcıdır; gömülü bir SDK Ribbon'ı değildir. Başlatma tarafından döndürülen docViewer örneği, API yüzeyinizdir ve kendi uç noktalarınızla birlikte gelir — burada ViewerApi/Open eylemi Görüntüleyicinin Nasıl Çalıştığı içinden alınmıştı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('/ViewerApi/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 Hızlı Başlangıç bölümüne bakın.

Karanlık mod ve RTL

Widget, karanlık bir 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 renderlanır. RTL ana bilgisayarlar 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 gelir ve her güncellemede değiştirilir. Kendi stil sayfanızdaki geçersiz kılmalar yükseltmelerde kalır; viewer.css üzerindeki düzenlemeler ise kalmaz.

Bu sayfa yardımcı oldu mu?