Компонент ContextualHelp отображает кнопку-иконку, при нажатии на которую показывается поясняющая информация. Адаптируется под размер экрана: на мобильных устройствах открывается модальное окно, на десктопах — всплывающая подсказка (Popover).
- Основное назначение: контекстная справка и подсказки для элементов интерфейса.
- Ключевые возможности:
- Адаптивное поведение: модальное окно на мобильных (
< 640px), Popover на десктопах. - Кастомная иконка: можно передать компонент или SVG-строку.
- Анимированные переходы для обоих режимов.
- Портал для модального окна через
Teleport. - Семантическая структура с использованием
Dialog и Popover из Headless UI.
| Проп | Тип | По умолчанию | Описание |
|---|
icon | Object | String | | Компонент иконки. Если не передан, используется стандартная иконка QuestionMarkCircleIcon. |
iconSvg | String | | SVG-строка для иконки. Имеет приоритет над icon. |
title | String | | Заголовок подсказки. |
content | String | | Текст подсказки. Может быть заменён через слот content. |
| Имя слота | Описание |
|---|
content | Кастомное содержимое подсказки. Если передан, заменяет проп content. |
| Ширина экрана | Компонент | Описание |
|---|
< 640px | Dialog (модальное окно) | Полноэкранное затемнение с центрированной панелью. Телепортируется в body. |
≥ 640px | Popover (всплывающая панель) | Выпадающая панель, привязанная к кнопке-триггеру. |
