سمات مخصصة

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