Backdrop

EBackdrop displays contextual and actionable content behind all other surfaces in an app. It will overlay your app with a dimmed layer. We have used this element creating ECanvas and EModal components.

Usage

<template>
  <EBtn @click="isShown = true">Show backdrop </EBtn>
  <EBackdrop @click="isShown = false" :status="isShown" />
</template>

<script setup>
const isShown = ref(false);
</script>

Props

For EBackdrop component, the following props are available:

Prop	Type	Default	Note
teleport	Boolean	true	Enables vue teleport.
blurEffect	Boolean	true	Applies background blur.
status	Boolean	false	Controls the visible/hidden status of backdrop.
color	String	"light_theme-100"	The given color is applied to the backdrop - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.

Emits

The EBackdrop component contains following emits.

Emit	Description
click	Emits click event.