PopoutWrapper

Позиционирование

Стратегия позиционирования

Свойство 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>;

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