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

Στυλ του προβολέα ώστε να ταιριάζει στην εφαρμογή σας

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

css
/* 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:

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

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

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

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

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

Ήταν αυτή η σελίδα χρήσιμη;