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

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

Ο προβολέας παρέχεται με ουδέτερο, βασισμένο στο Bootstrap, στυλ που σερβίρεται από τους ενσωματωμένους πόρους (viewer.css, καθώς και φύλλα στυλ ανά χαρακτηριστικό όπως searchBar.css και annotationBar.css). Η θεματοποίηση γίνεται σε τρία επίπεδα — επιλέξτε το πιο ρηχό που σας φέρνει εκεί.

Επίπεδο 1 — Διαμορφώστε το περιβάλλον

  • ViewerConfig.ShowThumbs = false — χωρίς πίνακα μικρογραφιών.
  • ViewerConfig.FitType = "height" | "width" — πώς οι σελίδες γεμίζουν το παράθυρο προβολής.
  • ViewerConfig.ShowThumbs = false together with selective CssConfig/ScriptConfig bundles — διατηρήστε μόνο το περιβάλλον που χρησιμοποιεί ο κεντρικός σας κώδικας.

Επίπεδο 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 — εδώ η ενέργεια ViewerApi/Open από το Πώς Λειτουργεί ο Viewer:

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

Η Αναζήτηση και η Σχόληση είναι διαφορετικές: τα προαιρετικά στοιχεία Ribbon τους είναι ενσωματωμένα στο SDK (IncludeSearchBar, IncludeAnnotationBar) και δημιουργούν το δικό τους DOM. Μπορείτε να τα χρησιμοποιήσετε μαζί με τη δική σας προσαρμοσμένη γραμμή εργαλείων Viewer ή να τα παραλείψετε και να καλέσετε μόνοι σας τα υποκείμενα APIs του widget. Δείτε το Quick Start για τη πλήρη σειρά ενσωμάτωσης.

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

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

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

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

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