Исходник ↗Песочница ↗

OnboardingTooltip

Компонент для отрисовки подсказки, как правило в случаях, когда пользователю хочется представить новый функционал.

Загружается...

Концепция

Показывать данные подсказки пользователю следует один раз, запоминая факт показа между сессиями. Рекомендуется показывать подсказку сразу после того, как нужный элемент появился в зоне видимости. Воспользуйтесь Intersection Observer API ↗ для реализации такого поведения.

Использование

Если хочется снабдить какой-то элемент интерфейса подсказкой, достаточно просто обернуть его в компонент OnboardingTooltip.

OnboardingTooltipContainer

Обычно компонент используется в контексте Panel, PanelHeader или FixedLayout, поэтому вам не нужно задумываться о позиционировании подсказки.

Если возникла потребность использовать OnboardingTooltip вне контекста перечисленных компонентов, следуйте следующим инструкциям:

в контейнере с прокруткой — замените какой-нибудь элемент, внутри которого нет прокрутки, на <OnboardingTooltipContainer> и добавьте ему css-свойство position: relative (или другую не-static);
внутри position: fixed используйте <OnboardingTooltipContainer fixed>.

Цветовые варианты

Загружается...

OnboardingTooltip технически является модальным окном (role="dialog"), а значит у него обязательно должно быть имя — его краткое название. Благодаря этому пользователи вспомогательных технологий знают, что это за элемент и какое у него содержимое.

Задать имя можно с помощью следующих способов:

используя свойство title;
используя свойство aria-label;
используя свойство aria-labelledby;

Свойства и методы

Свойство	Описание
`appearance`	`"accent" \| "neutral" \| "white" \| "black" \| "inversion"` Стиль отображения подсказки. По умолчанию: `-`
`arrowHeight`	`number` Высота стрелки. Складывается с `mainAxis`, чтобы стрелка не залезала на якорный элемент. По умолчанию: `8`
`ArrowIcon`	`ComponentType<SVGAttributes<SVGSVGElement>>` Пользовательская SVG иконка. Требования: Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`). Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах, растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG. (смотри https://github.com/VKCOM/VKUI/pull/4496 ↗). Убедитесь, что компонент принимает все валидные для SVG параметры. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами. По умолчанию: `-`
`arrowOffset`	`number` Сдвиг стрелки относительно текущих координат. По умолчанию: `0`
`arrowPadding`	`number` Безопасная зона вокруг стрелки, чтобы та не выходила за края контента. По умолчанию: `10`
`arrowRef`	`Element \| MutableRefObject<Element \| null> \| null` По умолчанию: `-`
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Целевой элемент. Всплывающее окно появится возле него. ⚠️ Если это пользовательский компонент, то он должен: предоставлять параметры либо `getRootRef`, либо `ref` (cм. `React.forwardRef()`) для получения ссылки на DOM-узел; принимать DOM атрибуты и события. По умолчанию: `-`
`className`	`string` Пользовательские css-классы, будут добавлены на root-элемент. По умолчанию: `-`
`description`	`ReactNode` Текст тултипа. По умолчанию: `-`
`disableArrow`	`boolean` Скрывает стрелку, указывающую на якорный элемент. По умолчанию: `false`
`disableFlipMiddleware`	`boolean` Указанное значение `placement` форсируется, даже если для выпадающего элемента недостаточно места. Не оказывает влияния при `placement` значениях - `'auto' \| 'auto-start' \| 'auto-end'` По умолчанию: `false`
`disableFocusTrap`	`boolean` Позволяет отключить захват фокуса. По умолчанию: `-`
`disableShiftMiddleware`	`boolean` Позволяет отключить смещение по главной оси, которое не даёт всплывающему элементу выходить за границы видимой области. По умолчанию: `false`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`isStaticArrowOffset`	`boolean` Включает абсолютное смещение по `arrowOffset`. По умолчанию: `false`
`maxWidth`	`string \| number \| null` Перебивает максимальную ширину заданную по умолчанию. Передача `null` полностью сбрасывает установку `max-width` на элемент. По умолчанию: `220`
`offsetByCrossAxis`	`number` Отступ по вспомогательной оси. По умолчанию: `0`
`offsetByMainAxis`	`number` Отступ по главной оси. По умолчанию: `0`
`onClose`	`((this: void) => void)` Обработчик, который вызывается при нажатии по любому месту в пределах экрана. По умолчанию: `-`
`onPlacementChange`	`OnPlacementChange` В зависимости от области видимости, позиция может смениться на более оптимальную, чтобы всплывающий элемент вместился в эту область видимости. По умолчанию: `-`
`overlayLabel`	`string` [a11y] Метка для подложки-кнопки, для описания того, что произойдёт при нажатии. По умолчанию: `Закрыть`
`placement`	`PlacementWithAuto` По умолчанию компонент выберет наилучшее расположение сам, но приоритетное можно задать с помощью этого свойства. По умолчанию: `bottom-start`
`restoreFocus`	`boolean \| (() => boolean \| HTMLElement)` По умолчанию: `true`
`shown`	`boolean` Если передан, то всплывающий элемент будет показано/скрыто в зависимости от значения свойства. По умолчанию: `true`
`title`	`ReactNode` Заголовок тултипа. По умолчанию: `-`
`titleId`	`string` [a11y] Id для заголовка тултипа. Можно использовать для связи элемента с `role="dialog"` и заголовка через `aria-labelledby`. По умолчанию: `-`

Предыдущая

Следующая