ธีมแบบกำหนดเอง

ตัวดูมาพร้อมกับรูปลักษณ์ที่เป็นกลางและอิง 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 (คู่คอนเทนเนอร์มาตรฐานจาก Quick Start).

สองกฎปฏิบัติที่เป็นประโยชน์:

• ห้ามโหลด Bootstrap ซ้ำ หากแอปของคุณมี Bootstrap อยู่แล้ว ให้ข้าม IncludeBootstrapCss/IncludeBootstrap และให้วิดเจ็ตสืบทอดจากของคุณ — เพียงอย่างนี้ทำให้ตัวดูดูเป็นธรรมชาติของแอปของคุณ.
• รวมเฉพาะแพ็คเกจที่คุณใช้ ทุกแฟล็ก CssConfig/ScriptConfig เป็นแบบเลือกใช้; แพ็คเกจน้อยลง, สไตล์น้อยลงที่ต้องต่อสู้.

ระดับ 3 — สร้างแถบเครื่องมือของคุณเอง

เพื่อประสบการณ์ที่มีแบรนด์เต็มรูปแบบ, ควบคุมวิดเจ็ตจาก UI ของคุณเอง — นี่คือวิธีที่ตัวอย่างอ้างอิงสร้างแถบเครื่องมือหลักของ Viewer. แถบเครื่องมือนั้นเป็นมาร์กอัปของโฮสต์พร้อมกับตัวช่วยเฉพาะแอป; ไม่ใช่ Ribbon ของ 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>

การค้นหาและการอธิบายภาพเป็นเรื่องที่แตกต่าง: ส่วนประกอบ Ribbon ทางเลือกของพวกเขาถูกฝังใน SDK (IncludeSearchBar, IncludeAnnotationBar) และสร้าง DOM ของตนเอง. คุณสามารถใช้ร่วมกับแถบเครื่องมือ Viewer ที่กำหนดเองของคุณหรือข้ามและเรียก API ของวิดเจ็ตพื้นฐานด้วยตนเอง. ดูที่ แพ็คเกจ Viewer ครบชุดใน Quick Start สำหรับลำดับการบูรณาการที่สมบูรณ์.

โหมดมืดและ RTL

วิดเจ็ตไม่มีธีมมืดให้ใช้งาน; การแทนที่ระดับ 2 ที่กำหนดเป้าหมายคลาสโหมดมืดของคุณ (เช่น .dark #divDocViewer { … }) บนพื้นหลังและขอบจะครอบคลุมความต้องการส่วนใหญ่, เนื่องจากเนื้อหาของหน้าถูกแสดงเป็นภาพ. สำหรับโฮสต์ RTL, ตัวดูทำงานได้อย่างราบรื่นภายในเลเอาต์ RTL — ให้แถบเครื่องมือของคุณรับรู้ RTL.

สิ่งที่ไม่ควรทำ

ห้าม fork หรือแก้ไขสไตล์ชีตที่ฝังอยู่: พวกมันมาพร้อมกับแพ็คเกจและจะถูกแทนที่ทุกครั้งที่อัปเดต. การแทนที่ในสไตล์ชีตของคุณจะคงอยู่หลังการอัปเกรด; การแก้ไข viewer.css จะไม่คงอยู่.