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

התאם את המראה של הצופה לאפליקציה שלך

הצופה מגיע עם מראה נייטרלי, מבוסס 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> רגילים; כל מה שתטעינו לאחר אותם תגיות ינצח את השרשרת. קבעו את הגודל והמסגרת של הצופה מקובץ ה‑CSS שלכם:

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 — בניית סרגל הכלים שלך

לחווייה ממותגת לחלוטין, שלוטו בווידג׳ט דרך ממשק המשתמש שלכם — כך בדיוק הדוגמה הרפרנסית בונה את סרגל הכלים הראשי של Viewer. סרגל זה הוא סימון מארח בתוספת עוזר ייחודי לאפליקציה; הוא אינו Ribbon SDK מוטמע. המופע docViewer שמוחזר באתחול הוא ממשק ה‑API שלכם, יחד עם נקודות הקצה שלכם:

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

חיפוש והערות הם שונים: רכיבי Ribbon האופציונליים שלהם מוטמעים ב‑SDK (IncludeSearchBar, IncludeAnnotationBar) ויוצרים DOM משלהם. ניתן להשתמש בהם יחד עם סרגל הכלים המותאם שלכם או לדלג עליהם ולקרוא ישירות ל‑APIs של הווידג׳ט. ראו את חבילת Viewer המלאה ב‑Quick Start לסדר האינטגרציה המלא.

מצב חשוך ו‑RTL

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

מה שלא כדאי לעשות

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

האם דף זה היה מועיל?