Overlay

Maintainer:
Vladeeg
GitHub
visible
background
import {Overlay} from '@gravity-ui/uikit';

Компонент Overlay рендерит наложение поверх родительского элемента с относительным позиционированием (свойство position в значении relative). Его можно использовать, например, чтобы сохранить необходимую структуру во время загрузки данных.

import {Box, Overlay, Loader} from '@gravity-ui/uikit';

<Box position="relative">
  <div>Some content to hide under overlay</div>
  <Overlay visible={loading}>
    <Loader />
  </Overlay>
</Box>;

Внешний вид

Фон

Доступны два типа фоновых цветов: base и float.

Свойства

ИмяОписаниеТипЗначение по умолчанию
classNameИмя CSS-класса корневого элемента.string
visibleСостояние видимости оверлея.booleanfalse
backgroundСтиль фона оверлея."base" "float"base
childrenСодержимое (как правило, компонент Loader).React.ReactNode