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

ตัวดูมาพร้อมรูปลักษณ์ที่เป็นกลางและอิง 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 ต้องเลือกใช้; ชุดน้อยลง, สไตล์น้อยลงที่ต้องต่อสู้.

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

เพื่อประสบการณ์ที่มีแบรนด์ครบถ้วน ให้ควบคุมวิดเจ็ตจาก UI ของคุณเอง — นี่คือวิธีที่ตัวอย่างอ้างอิงสร้างแถบเครื่องมือหลักของ Viewer. แถบเครื่องมือนั้นเป็น markup ของโฮสต์พร้อมตัวช่วยเฉพาะแอป; ไม่ใช่ Ribbon ของ SDK ที่ฝังอยู่. อินสแตนซ์ docViewer ที่คืนจากการเริ่มต้นคือ API ของคุณ, พร้อมกับ endpoint ของคุณเอง — ที่นี่คือการกระทำ ViewerApi/Open จาก วิธีการทำงานของ Viewer:

<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('/ViewerApi/Open?fileName=Sample.pdf', { method: 'POST' });
        const token = await resp.text();
        objViewer.View(token);
    });
</script>

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

โหมดมืดและ RTL

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

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

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