ธีมที่กำหนดเอง

ตัวดูมาพร้อมกับลุคที่เป็นกลางและอิง 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> ธรรมดา; สิ่งใดที่คุณโหลด หลัง จากนั้นจะชนะการทำงานของ cascade. ปรับขนาดและกรอบของตัวดูจากสไตล์ชีตของคุณเอง:

/* 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. แถบเครื่องมือนั้นเป็น markup ของโฮสต์บวกกับตัวช่วยเฉพาะแอป; ไม่ใช่ Ribbon ของ SDK ที่ฝังอยู่. อินสแตนซ์ docViewer ที่คืนจากการเริ่มต้นคือ API ของคุณ, พร้อมกับ endpoint ของคุณเอง:

<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 จะไม่คงอยู่.