Користувацькі теми – Doconut Документація

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

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

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

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

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

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. Ви можете використовувати їх разом із вашою кастомною панеллю інструментів або пропустити їх і викликати базові API віджету самостійно. Дивіться Швидкий старт для повного порядку інтеграції.

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

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

Що не слід робити

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