Користувацькі теми

Стилізуйте переглядач, щоб він відповідав вашому застосунку

Переглядач поставляється з нейтральним виглядом на базі 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; }

Сторінка-хост повністю контролює зовнішнє розташування — віджет відображається всередині будь‑якого контейнера, який ви вкажете для #divDocViewer / #div_ctlDoc (стандартна пара контейнерів з Quick Start).

Дві практичні правила:

  • Не завантажуйте Bootstrap двічі. Якщо ваш застосунок вже постачається з Bootstrap, пропустіть IncludeBootstrapCss/IncludeBootstrap і дозволіть віджету успадкувати ваш — це вже робить вигляд переглядача нативним для вашого застосунку.
  • Включайте лише ті пакети, які використовуєте. Кожен прапорець CssConfig/ScriptConfig є опціональним; чим менше пакетів, тим менше стилів, з якими треба боротися.

Рівень 3 — Створіть власну панель інструментів

Для повністю брендованого досвіду керуйте віджетом зі свого інтерфейсу — саме так референтний приклад створює основну панель інструментів Viewer. Ця панель — це розмітка хоста плюс специфічний для застосунку допоміжний код; це не вбудована SDK‑стрічка. Екземпляр docViewer, який повертається після ініціалізації, є вашою API‑поверхнею разом із вашими власними кінцевими точками:

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 віджету самостійно. Дивіться повний пакет Viewer у Quick Start для повного порядку інтеграції.

Темний режим та RTL

Віджет не постачається з темною темою; перевизначення рівня 2, яке націлюється на ваш клас темного режиму (наприклад, .dark #divDocViewer { … }) для фонів і меж, покриває більшість потреб, оскільки вміст сторінки сам по собі є зображенням. Для хостів RTL переглядач без проблем працює в RTL‑розмітці — забезпечте, щоб ваша власна панель інструментів була RTL‑сумісна.

Чого не варто робити

Не форкуйте і не редагуйте вбудовані таблиці стилів: вони постачаються в пакеті і замінюються при кожному оновленні. Перевизначення у вашій власній таблиці стилів зберігаються під час оновлень; зміни у viewer.css ні.

Чи була ця сторінка корисною?