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

ตัวดูมาพร้อมรูปลักษณ์ที่เป็นกลางและอิง Bootstrap ซึ่งให้บริการจากทรัพยากรที่ฝังไว้ (viewer.css พร้อมกับสไตล์ชีตตามฟีเจอร์เช่น searchBar.css และ annotationBar.css). การกำหนดธีมทำได้ในสามระดับ — เลือกระดับที่ตื้นที่สุดที่ตอบโจทย์คุณ.

ระดับ 1 — กำหนดค่า Chrome

การ "กำหนดธีม" ส่วนใหญ่จริง ๆ แล้วเป็นการกำหนดค่า:

• ViewerConfig.ShowThumbs = false — ไม่มีแผงรูปย่อ.
• ViewerConfig.FitType = "height" | "width" — วิธีที่หน้าแสดงเต็มหน้าต่างดู.
• ViewerConfig.ShowThumbs = false ร่วมกับแพ็กเกจ CssConfig/ScriptConfig ที่เลือกใช้ — เก็บเฉพาะ Chrome ที่โฮสต์ของคุณใช้.

ระดับ 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 เป็นแบบ opt‑in; แพ็กเกจน้อยลง, สไตล์น้อยลงที่ต้องจัดการ.

ระดับ 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>

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

โหมดมืดและ RTL

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

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

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