ערכות נושא מותאמות

הצופה מגיע עם מראה נייטרלי, מבוסס Bootstrap, המסופק מהמשאבים המוטמעים (viewer.css, ועוד קבצי 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 שמוחזר בעת האתחול הוא ממשק ה‑API שלכם, יחד עם נקודות הקצה שלכם:

<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 משלהם. ניתן להשתמש בהם יחד עם סרגל הכלים המותאם שלכם או לדלג עליהם ולקרוא ישירות ל‑APIs של הווידג'ט. ראו את חבילת Viewer המלאה במדריך המהיר לקבלת סדר האינטגרציה המלא.

מצב כהה ו‑RTL

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

מה שלא לעשות

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