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

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

Переглядач поставляється з нейтральним, заснованим на 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 Ribbon. Екземпляр 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 ні.

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