تم‌های سفارشی

Viewer با ظاهری خنثی و مبتنی بر Bootstrap ارائه می‌شود که از منابع توکار (viewer.css به‌همراه سبک‌برگ‌های ویژگی‌محور مانند searchBar.css و annotationBar.css) سرو می‌شود. تم‌گذاری در سه سطح انجام می‌شود — کم‌عمق‌ترین سطحی که به هدف می‌رسید را انتخاب کنید.

Level 1 — پیکربندی کروم

• ViewerConfig.ShowThumbs = false — بدون پنل تصویر بندانگشتی.
• ViewerConfig.FitType = "height" | "width" — نحوه پر شدن صفحات در نمای پنجره.
• ViewerConfig.ShowThumbs = false together with selective CssConfig/ScriptConfig bundles — فقط کرومی که میزبان شما استفاده می‌کند را نگه دارید.

Level 2 — بازنویسی CSS

Viewer.ReferenceCss() تگ‌های ساده <link> تولید می‌کند؛ هر چیزی که بعد از آن‌ها بارگذاری کنید، بر سلسله‌مراتبی برتری دارد. اندازه و قاب Viewer را از طریق سبک‌برگ خود تنظیم کنید:

/* سبک‌برگ شما، بارگذاری شده پس از ReferenceCss() */

/* دو کانتینری که شما مالک آن‌ها هستید */
#divDocViewer { width: 100%; height: calc(100vh - 48px); }

/* کارت‌های صفحه ویجت */
.docPage { max-width: none; }

صفحه میزبان کاملاً چیدمان بیرونی را کنترل می‌کند — ویجت داخل هر جعبه‌ای که به #divDocViewer / #div_ctlDoc اختصاص دهید رندر می‌شود (جفت کانتینر استاندارد از شروع سریع).

دو قانون عملی:

• از بارگذاری دوباره Bootstrap خودداری کنید. اگر برنامه شما قبلاً Bootstrap را ارائه می‌دهد، IncludeBootstrapCss/IncludeBootstrap را نادیده بگیرید و بگذارید ویجت از آن ارث ببرد — این به تنهایی ظاهر Viewer را بومی برنامه شما می‌کند.
• فقط بسته‌هایی را که استفاده می‌کنید وارد کنید. هر پرچم CssConfig/ScriptConfig به صورت انتخابی فعال است؛ بسته‌های کمتر، سبک‌های کمتری برای مقابله.

Level 3 — ساخت نوار ابزار خود

برای تجربه‌ای کاملاً برند شده، ویجت را از UI خودتان کنترل کنید — این دقیقاً همان روشی است که نمونه مرجع نوار ابزار اصلی Viewer خود را می‌سازد. آن نوار ابزار ترکیبی از مارکاپ میزبان به‌همراه یک کمک‌کننده مخصوص برنامه است؛ این یک Ribbon SDK توکار نیست. نمونه docViewer که پس از مقداردهی اولیه برگردانده می‌شود، سطح API شماست، به‌همراه نقاط انتهایی خودتان — اینجا عمل ViewerApi/Open از نحوه کار Viewer است:

<div id="toolbar">
    <button id="btnOpen">Open</button>
    <button id="btnPrev">‹</button>
    <button id="btnNext">›</button>
    <!-- سیستم طراحی شما، آیکون‌های شما -->
</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: () => { /* دکمه‌های خود را فعال کنید */ },
        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 خود را تولید می‌کنند. می‌توانید آن‌ها را همراه با نوار ابزار سفارشی Viewer خود استفاده کنید یا آن‌ها را نادیده بگیرید و خودتان APIهای زیرساختی ویجت را فراخوانی کنید. برای ترتیب کامل ادغام، به شروع سریع مراجعه کنید.

حالت تاریک و RTL

ویجت تم تاریک ارائه نمی‌دهد؛ یک بازنویسی سطح 2 که کلاس حالت‑تاریک شما را هدف می‌گیرد (مثلاً .dark #divDocViewer { … }) برای پس‌زمینه‌ها و حاشیه‌ها اکثر نیازها را پوشش می‌دهد، زیرا محتوای صفحه به‌صورت تصویر رندر می‌شود. برای میزبان‌های RTL، Viewer به‌خوبی داخل یک چیدمان RTL کار می‌کند — نوار ابزار خود را آگاه از RTL نگه دارید.

کارهایی که نباید انجام داد

نباید stylesheetهای توکار را فورک یا ویرایش کنید: آن‌ها داخل بسته ارائه می‌شوند و در هر به‌روزرسانی جایگزین می‌شوند. بازنویسی‌ها در سبک‌برگ خودتان پس از ارتقا باقی می‌مانند؛ ویرایش‌های viewer.css این‌گونه نیست.