سمات مخصصة

يشحن العارض بمظهر محايد يعتمد على 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 الذي يُرجع بعد التهيئة هو واجهة برمجة التطبيقات الخاصة بك، مع نقاط النهاية الخاصة بك — هنا إجراء ViewerApi/Open من كيف يعمل العارض:

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

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

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

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

ما لا يجب فعله

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