PopoutWrapper
Компонент-обёртка для создания всплывающих элементов. Отвечает за стратегию позиционирования элементов и подложку.
Является базовым компонентом в Alert
, ActionSheet
и ScreenSpinner
.
Позиционирование
Стратегия позиционирования
Свойство strategy
определяет, как будет позиционироваться всплывающий элемент:
"fixed"
— контейнеру задаётся стильposition: fixed
(по умолчанию);"absolute"
— контейнеру задаётся стильposition: absolute
;"none"
— у контейнера не выставляетсяposition
.
Горизонтальное выравнивание
Свойство alignX
определяет выравнивание контента по горизонтали:
"center"
— контент выравнивается по центру (по умолчанию);"left"
— контент выравнивается по левому краю;"right"
— контент выравнивается по правому краю.
Вертикальное выравнивание
Свойство alignY
определяет выравнивание контента по вертикали:
"center"
— контент выравнивается по центру (по умолчанию);"top"
— контент выравнивается по верхнему краю;"bottom"
— контент выравнивается по нижнему краю.
z-index
Свойство zIndex
позволяет управлять порядком наложения элементов. Можно задать числовое или строковое значение (токен):
// Установка z-index через токен
<PopoutWrapper zIndex="var(--vkui--z_index_popout)">
<div>Контент</div>
</PopoutWrapper>
// Установка z-index числом
<PopoutWrapper zIndex={100}>
<div>Контент</div>
</PopoutWrapper>
Внешний вид
Подложка
По умолчанию компонент создаёт полупрозрачную подложку. Её можно отключить с помощью свойства noBackground
:
// Подложка отключена
<PopoutWrapper noBackground>
<div>Контент</div>
</PopoutWrapper>
Также компонент поддерживает анимацию плавного исчезновения подложки через свойство closing
:
// Подложка будет исчезать с анимацией
<PopoutWrapper closing>
<div>Контент</div>
</PopoutWrapper>
Полоса прокрутки
Чаще всего подобные всплывающие окна требуют блокировки полосы прокрутки всей страницы.
Для этого используйте хук useScrollLock
:
const [isOpen, setIsOpen] = React.useState(false);
// Для улучшения UX, при открытии всплывающего окна, стоит блокировать прокрутку страницы.
// Иначе у пользователя может быть две прокрутки: одна на всплывающем окне, вторая за ним.
useScrollLock(isOpen);
return (
<>
<Button onClick={() => setIsOpen(true)}>Открыть окно</Button>
{isOpen && (
<PopoutWrapper onClick={() => setIsOpen(false)}>
<div>
<h2>Всплывающее окно</h2>
<p>Содержимое всплывающего окна</p>
</div>
</PopoutWrapper>
)}
</>
);
Обработчики событий
Компонент позволяет обрабатывать нажатия по подложке через свойство onClick
:
const handleClick = () => {
// Закрыть всплывающий элемент
};
<PopoutWrapper onClick={handleClick}>
<div>Контент</div>
</PopoutWrapper>;
Свойства и методы
Свойство | Описание |
---|---|
alignX | "center" | "right" | "left" Выравнивает контент по горизонтали. По умолчанию: center |
alignY | "center" | "top" | "bottom" Выравнивает контент по вертикали. По умолчанию: center |
closing | boolean Спрячет компонент через fade-out анимацию. По умолчанию: false |
fixed | boolean Deprecated: Будет удалён в VKUI v8
Используйте Включает фиксированное позиционирование. При значении По умолчанию: true |
getRootRef | Ref<HTMLDivElement> По умолчанию: - |
noBackground | boolean Позволяет сделать прозрачную подложку. По умолчанию: false |
strategy | "none" | "fixed" | "absolute" Стратегия позиционирования:
По умолчанию: 'fixed' |
zIndex | string | number Позволяет задать z-index через токен или числом. По умолчанию: var(--vkui--z_index_popout) |