سمات مخصصة

يأتي المشاهد بمظهر محايد يعتمد على Bootstrap يتم تقديمه من الموارد المدمجة (viewer.css، بالإضافة إلى أوراق الأنماط الخاصة بالميزات مثل searchBar.css و annotationBar.css). يتم تطبيق السمات على ثلاثة مستويات — اختر المستوى الأقل عمقًا الذي يحقق هدفك.

المستوى 1 — ضبط الإطار

الكثير من "التصميم" هو في الواقع تكوين:

• ViewerConfig.ShowThumbs = false — لا لوحة مصغرات.
• ViewerConfig.FitType = "height" | "width" — كيف تُملأ الصفحات مساحة العرض.
• ViewerConfig.ShowThumbs = false مع حزم CssConfig/ScriptConfig الانتقائية — احتفظ فقط بالإطار الذي يستخدمه المضيف.

المستوى 2 — تجاوز CSS

Viewer.ReferenceCss() ينتج وسوم <link> عادية؛ أي شيء تقوم بتحميله بعدها يسيطر على السلسلة. قم بتحديد الحجم وإطار المشاهد من خلال ورقة الأنماط الخاصة بك:

/* Your stylesheet, loaded after ReferenceCss() */

/* The two containers you own */
#divDocViewer { width: 100%; height: calc(100vh - 48px); }

/* Widget page cards */
.docPage { max-width: none; }

تتحكم صفحة المضيف بالتخطيط الخارجي بالكامل — يتم عرض الودجت داخل أي صندوق تعطيه لـ #divDocViewer / #div_ctlDoc (زوج الحاويات القياسي من البداية السريعة).

قاعدتان عمليتان:

• لا تقم بتحميل Bootstrap مرتين. إذا كان تطبيقك يضم Bootstrap بالفعل، تخطّ IncludeBootstrapCss/IncludeBootstrap ودع الودجت يرث إعداداتك — هذا وحده يجعل المشاهد يبدو أصليًا لتطبيقك.
• قم بتضمين الحزم التي تستخدمها فقط. كل علم CssConfig/ScriptConfig هو اختيار؛ كلما قل عدد الحزم، قل عدد الأنماط التي تحتاج لمواجهتها.

المستوى 3 — بناء شريط أدواتك الخاص

للحصول على تجربة مميزة بالكامل، قم بالتحكم في الودجت من واجهتك الخاصة — هذا هو بالضبط ما يفعله المثال المرجعي لبناء شريط أدوات المشاهد الرئيسي. ذلك الشريط هو تعليمات مضيف بالإضافة إلى مساعد خاص بالتطبيق؛ ليس شريط SDK مدمج. نسخة docViewer التي تُرجعها عملية التهيئة هي واجهة برمجة التطبيقات الخاصة بك، إلى جانب نقاط النهاية الخاصة بك:

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

البحث والتعليقات مختلفة: مكوّنات الشريط الاختيارية الخاصة بهما مدمجة في SDK (IncludeSearchBar، IncludeAnnotationBar) وتولد DOM خاص بها. يمكنك استخدامها مع شريط أدوات المشاهد المخصص أو تخطيها واستدعاء واجهات برمجة الودجت الأساسية بنفسك. راجع حزمة المشاهد الكاملة في البداية السريعة للحصول على ترتيب التكامل الكامل.

الوضع الداكن وRTL

الودجت لا يأتي بموضوع داكن؛ تجاوز المستوى 2 المستهدف لفئة الوضع الداكن (مثال: .dark #divDocViewer { … }) على الخلفيات والحدود يغطي معظم الاحتياجات، لأن محتوى الصفحة نفسه يُعرض كصور. بالنسبة للمضيفين الذين يستخدمون RTL، يعمل المشاهد بسلاسة داخل تخطيط RTL — احرص على أن يكون شريط أدواتك مدركًا لـ RTL.

ما لا يجب فعله

لا تقم بعمل نسخة أو تعديل أوراق الأنماط المدمجة: فهي تُضمّن داخل الحزمة وتُستبدل في كل تحديث. التجاوزات في ورقة الأنماط الخاصة بك تبقى بعد الترقيات؛ بينما التعديلات على viewer.css لا تبقى.