Overlay separates foreground from 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>
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>
As an extension of Flex, Overlay accepts all of Flex's props in addition to the props listed below.
| Name | Type | Default | Description |
|---|---|---|---|
dark | Boolean | false | Controls the theming |