Özel Temalar

Görünümü uygulamanıza uyacak şekilde stil verin

Görüntüleyici, gömülü kaynaklardan (viewer.css ve searchBar.css ile 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 — size en uygun sığ seviyeyi seçin.

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

Çoğu “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 birlikte seçici CssConfig/ScriptConfig paketleri — yalnızca ana bilgisayarınızın kullandığı çerçeveyi tutun.

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

Viewer.ReferenceCss() basit <link> etiketleri üretir; onlardan sonra yüklediğiniz her şey kademeyi kazanır. Görüntüleyiciyi kendi stil sayfanızla 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 sayfa dış düzeni tamamen kontrol eder — widget, #divDocViewer / #div_ctlDoc (Hızlı Başlangıç'tan standart konteyner çifti) verdiğiniz kutu içinde render edilir.

İ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 aynısıdır. Bu araç çubuğu, ana bilgisayar işaretlemesi ve uygulamaya özgü bir yardımcıdan oluşur; gömülü bir SDK Şeridi değildir. Başlatma tarafından döndürülen docViewer örneği, API yüzeyinizdir ve kendi uç noktalarınızı içerir:

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ı Şerit 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 alttaki widget API'lerini kendiniz çağırabilirsiniz. Tam entegrasyon sırası için Hızlı Başlangıç'taki tam Viewer paketine 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ı hedefleyen bir Seviye 2 geçersiz kılma (ör. .dark #divDocViewer { … }) çoğu ihtiyacı karşılar, çünkü sayfa içeriği görüntü olarak render edilir. 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 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.

Bu sayfa yardımcı oldu mu?