سمات مخصصة

يأتي العارض بمظهر محايد يعتمد على 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 لا تبقى.