Overlay

A low-level component for creating overlay effects, such as modals, dialogs, or dimming backgrounds.

Usage

Use Overlay inside a Stack (usually with fit="expand") to cover the content below it. It includes a built-in fade transition (0.25s ease) similar to iOS modal dimming.

Code Example

<script setup lang="ts">
import { ref } from "vue";
import {
  Overlay,
  ElevatedButton,
  Stack,
  Container,
  Center,
  Text,
  Colors,
  TextStyle,
  EdgeInsets,
} from "fluekit";

const isVisible = ref(false);

const toggle = () => {
  isVisible.value = !isVisible.value;
};

const close = () => {
  isVisible.value = false;
};
</script>

<template>
  <Container height="300" :border="{ width: 1, color: '#eee' }" clipBehavior="hardEdge">
    <Stack fit="expand">
      <Center>
        <ElevatedButton @pressed="toggle"> Show Overlay </ElevatedButton>
      </Center>

      <!-- The Overlay -->
      <Overlay :visible="isVisible" @tap="close">
        <Center>
          <Container :color="Colors.white" :padding="EdgeInsets.all(20)" :borderRadius="8">
            <Text :style="TextStyle({ fontSize: 16 })">Tap anywhere to close</Text>
          </Container>
        </Center>
      </Overlay>
    </Stack>
  </Container>
</template>

Props

Prop	Type	Default	Description
visible	boolean	true	Controls the visibility of the overlay.
color	string | Color	rgba(0, 0, 0, 0.5)	The background color.
zIndex	number	1000	The z-index style property.

Events

Name	Description
tap	Emitted when the overlay background is clicked.