נושאים מותאמים

הצופה מגיע עם מראה נייטרלי, מבוסס Bootstrap, המסופק מהמשאבים המוטמעים (viewer.css, ועוד קבצי CSS לכל תכונה כגון searchBar.css ו‑annotationBar.css). התאמה נעשית בשלושה רמות — בחרו את הרמה השטוחה ביותר שמביאה אתכם לשם.

רמה 1 — הגדרת הכרום

הרבה מה-"theming" הוא למעשה תצורה:

• ViewerConfig.ShowThumbs = false — ללא לוח תצוגה מקדימה.
• ViewerConfig.FitType = "height" | "width" — כיצד הדפים ממלאים את תצוגת החלון.
• ViewerConfig.ShowThumbs = false — יחד עם חבילות נבחרות של CssConfig/ScriptConfig — שמרו רק על הכרום שהמארח שלכם משתמש בו.

רמה 2 — דריסת ה‑CSS

Viewer.ReferenceCss() מפיק תגיות <link> פשוטות; כל מה שתטענו לאחר הן ינצח במדרג. הגדירו את הגודל והמסגרת של הצופה באמצעות קובץ ה‑CSS שלכם:

/* 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 (זוג המכולות הסטנדרטי מה‑Quick Start).

שני כללים מעשיים:

• אל תטעינו Bootstrap פעמיים. אם האפליקציה שלכם כבר כוללת Bootstrap, דלגו על IncludeBootstrapCss/IncludeBootstrap ותנו לווידג'ט לרשת את שלכם — זה לבדו גורם לצופה להיראות טבעי באפליקציה שלכם.
• כלול רק את החבילות שבהן אתם משתמשים. כל דגל CssConfig/ScriptConfig הוא אופציונלי; פחות חבילות, פחות סגנונות להתמודד איתם.

רמה 3 — בניית סרגל הכלים שלך

לחוויית מותג מלאה, שלטו בווידג'ט דרך ממשק המשתמש שלכם — כך בדיוק בונה הדוגמה הרפרנסית את סרגל הכלים הראשי של הצופה. סרגל זה הוא סימון של המארח בתוספת עזר ייחודי לאפליקציה; הוא אינו Ribbon של SDK משולב. המופע docViewer שמוחזר באתחול הוא ממשק ה‑API שלכם, יחד עם נקודות הקצה שלכם — כאן הפעולה 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 משלהם. ניתן להשתמש בהם יחד עם סרגל הכלים המותאם שלכם או לדלג עליהם ולקרוא ישירות ל‑API של הווידג'ט. ראו את ה‑התחלה מהירה לקבלת סדר האינטגרציה המלא.

מצב כהה ו‑RTL

הווידג'ט אינו כולל ערכת נושא כהה; דריסת רמה 2 המכוונת למחלקת המצב כהה שלכם (לדוגמה .dark #divDocViewer { … }) ברקעים ובקצוות מכסה את רוב הצרכים, מכיוון שהתוכן של העמוד מוצג כתמונות. עבור מארחים עם RTL, הצופה פועל ללא בעיה בתוך פריסת RTL — שמרו על כך שסרגל הכלים שלכם מודע ל‑RTL.

מה שלא לעשות

אל תבצעו fork או עריכה של קבצי ה‑CSS המוטמעים: הם מגיעים כחלק מהחבילה ומוחלפים בכל עדכון. דריסות בקובץ ה‑CSS שלכם נשארות לאחר שדרוגים; עריכות ל‑viewer.css אינן נשמרות.