Документация: Виджет Индекса Настроений Рынка
Обзор
Виджет Индекса Настроений Рынка позволяет легко интегрировать анимированный градусник, отображающий текущий индекс настроений на вашей веб-странице. Виджет автоматически применяет стили КОРП-ДЕПО и поддерживает тёмную/светлую темы.
Подключение виджета
Для использования виджета необходимо подключить скрипт с официального сервера КОРП-ДЕПО перед закрывающим тегом </body>:
<script src="https://corpdepo.ru/widgets/corpdepo-gauge-widget.js"></script>
Встраивание виджета
Для встраивания виджета используйте тег <div> с классом corpdepo-gauge-widget. Виджет автоматически найдет этот элемент и инициализируется в нем.
<div class="corpdepo-gauge-widget"></div>
Параметры конфигурации
Настройки виджета передаются через data- атрибуты контейнера. Все параметры необязательны.
| Атрибут | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
data-title | string | Основной заголовок виджета. | "Индекс настроений рынка" |
data-subtitle | string | Подзаголовок. Можно использовать плейсхолдеры {min} и {max}. | "Значение от {min} до {max}" |
data-min-value | number | Минимальное значение шкалы. | 1 |
data-max-value | number | Максимальное значение шкалы. | 10 |
data-initial-value | number | Начальное значение индекса. | 7 |
data-theme | string | Цветовая схема виджета. Доступные значения: dark, light. | dark |
data-hide-controls | boolean | Если присутствует, скрывает все кнопки управления. | false |
Интерактивные элементы управления
Если атрибут data-hide-controls не указан, виджет отображает набор круглых кнопок для демонстрации:
- Красная кнопка: Устанавливает значение на минимум шкалы.
- Желтая кнопка: Устанавливает значение на середину шкалы.
- Зеленая кнопка: Устанавливает значение на максимум шкалы.
- Оранжевая кнопка (?): Устанавливает случайное значение в пределах заданного диапазона.