PopoutWrapper

Компонент-обёртка для создания всплывающих элементов. Отвечает за стратегию позиционирования элементов и подложку. Является базовым компонентом в Alert, ActionSheet и ScreenSpinner.

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

Свойство strategy определяет, как будет позиционироваться всплывающий элемент:

  • "fixed" — контейнеру задаётся стиль position: fixed (по умолчанию);
  • "absolute" — контейнеру задаётся стиль position: absolute;
  • "none" — у контейнера не выставляется position.

Свойство alignX определяет выравнивание контента по горизонтали:

  • "center" — контент выравнивается по центру (по умолчанию);
  • "left" — контент выравнивается по левому краю;
  • "right" — контент выравнивается по правому краю.

Свойство alignY определяет выравнивание контента по вертикали:

  • "center" — контент выравнивается по центру (по умолчанию);
  • "top" — контент выравнивается по верхнему краю;
  • "bottom" — контент выравнивается по нижнему краю.

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

Спрячет компонент через fade-out анимацию.

По умолчанию: false
fixedboolean

Deprecated: Будет удалён в VKUI v8 Используйте strategy вместо этого свойства.

Включает фиксированное позиционирование.

При значении false у компонента не задан никакой position.

По умолчанию: true
getRootRefRef<HTMLDivElement>
По умолчанию: -
noBackgroundboolean

Позволяет сделать прозрачную подложку.

По умолчанию: false
strategy"none" | "fixed" | "absolute"

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

  • fixed: у контейнера выставлен position: fixed
  • absolute: у контейнера выставлен position: absolute
  • none: у контейнера не выставлен position.
По умолчанию: 'fixed'
zIndexstring | number

Позволяет задать z-index через токен или числом.

По умолчанию: var(--vkui--z_index_popout)