# Overlay

Fullscreen overlay, emitting click events.

# Most common usage scenario

<template>
  <SfOverlay :visible="visible" :transition="transition" />
</template>
<script>
import { SfOverlay } from "@storefront-ui/vue";
export default {
  components: {
    SfOverlay,
  },
  data() {
    return {
      transition: "fade",
      visible: true,
    };
  },
};
</script>

# Props

  • transition

    • Transition effect to apply when overlay visibility is changed
    • type: string
    • defaultValue: "fade"
  • visible

    • Visibility state
    • type: boolean
    • defaultValue: false

# Slots

None.

# Events

None.

# CSS modifiers

None.

# CSS custom properties (variables)

  • --overlay-z-index
  • --overlay-background

# Overridden other components CSS variables

None.

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.