Προσαρμοσμένα Θέματα

Ο προβολέας παρέχεται με ουδέτερο, βασισμένο στο 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>· οτιδήποτε φορτώνετε μετά από αυτές κερδίζει την αλυσίδα. Μεγέθυνση και πλαισίωση του προβολέα από το δικό σας φύλλο στυλ:

/* Your stylesheet, loaded after ReferenceCss() */

/* The two containers you own */
#divDocViewer { width: 100%; height: calc(100vh - 48px); }

/* Widget page cards */
.docPage { max-width: none; }

Η σελίδα-φιλοξενία ελέγχει πλήρως τη εξωτερική διάταξη — το widget αποδίδει μέσα σε οποιοδήποτε κουτί δώσετε στο #divDocViewer / #div_ctlDoc (το τυπικό ζεύγος containers από το Quick Start).

Δύο πρακτικοί κανόνες:

• Μην φορτώνετε δύο φορές το Bootstrap. Αν η εφαρμογή σας ήδη περιλαμβάνει Bootstrap, παραλείψτε το IncludeBootstrapCss/IncludeBootstrap και αφήστε το widget να κληρονομήσει το δικό σας — αυτό μόνο κάνει τον προβολέα να φαίνεται εγγενής στην εφαρμογή σας.
• Συμπεριλάβετε μόνο τα πακέτα που χρησιμοποιείτε. Κάθε σημαία CssConfig/ScriptConfig είναι επιλογή· λιγότερα πακέτα, λιγότερα στυλ να διαχειριστείτε.

Επίπεδο 3 — Δημιουργήστε τη δική σας γραμμή εργαλείων

Για μια πλήρως επωνυμοποιημένη εμπειρία, ελέγξτε το widget από το δικό σας UI — αυτό είναι ακριβώς ο τρόπος με τον οποίο το δείγμα αναφοράς δημιουργεί τη βασική γραμμή εργαλείων του Viewer. Η γραμμή εργαλείων αυτή είναι markup του κεντρικού μαζί με έναν βοηθό ειδικό για την εφαρμογή· δεν είναι ενσωματωμένο SDK Ribbon. Η παρουσία docViewer που επιστρέφεται κατά την αρχικοποίηση είναι η διεπαφή API σας, μαζί με τα δικά σας endpoints:

<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 ή να τα παραλείψετε και να καλέσετε μόνοι σας τα υποκείμενα APIs του widget. Δείτε το πλήρες πακέτο Viewer στο Quick Start για τη σειρά ολοκληρωμένης ενσωμάτωσης.

Σκοτεινή λειτουργία και RTL

Το widget δεν παρέχει σκοτεινό θέμα· μια παράκαμψη Επίπεδου 2 που στοχεύει στην κλάση dark-mode σας (π.χ. .dark #divDocViewer { … }) για φόντα και περιθώρια καλύπτει τις περισσότερες ανάγκες, καθώς το περιεχόμενο της σελίδας αποδίδεται ως εικόνα. Για κεντρικές σελίδες RTL, ο προβολέας λειτουργεί άψογα μέσα σε διάταξη RTL — κρατήστε τη δική σας γραμμή εργαλείων ενήμερη για RTL.

Τι δεν πρέπει να κάνετε

Μην κάνετε fork ή επεξεργασία των ενσωματωμένων φύλλων στυλ: παρέχονται μέσα στο πακέτο και αντικαθίστανται σε κάθε ενημέρωση. Οι παρακάμψεις στο δικό σας φύλλο στυλ παραμένουν μετά τις αναβαθμίσεις· οι επεξεργασίες στο viewer.css δεν διατηρούνται.