Overlay

Overalay separates foreground with the background content.

Background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample

Foreground sample content

import { Overlay } from "@nulogy/components";

<Text>Background content sample</Text>

<Overlay>
  <Text>Foreground sample content</Text>
</Overlay>

Themes

Overlay by default assigns light theme but dark theme is also available.

Background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample background content sample

Foreground sample content

import { Overlay } from "@nulogy/components";
<Text>Background content sample</Text>
<Overlay dark>
  <Card>
    <Text>Foreground sample content</Text>
  </Card>
</Overlay>

Props

In addition to this props listed below the Overlay component accepts Flex's props since it is it's extension.

NameTypeDefaultDescription

dark

Boolean

false

Controls the theming

Related components