# Modal

Modal component with overlay. Example usage can involve many cases like informative or decision dialogue.

# Most common usage scenario

<template>
  <SfModal
    :visible="visible"
    :title="title"
    :overlay="overlay"
    :cross="cross"
    :persistent="persistent"
    @close="visible = false"
  >
    <p>HELLO STOREFRONT UI!</p>
    <form action="">
      <input type="text" />
      <input type="text" />
      <button>hello</button>
    </form>
  </SfModal>
</template>
<script>
import { SfModal } from "@storefront-ui/vue";
export default {
  components: {
    SfModal,
  },
  data() {
    return {
      visible: true,
      title: "My title",
      overlay: true,
      cross: true,
      persistent: false,
    };
  },
};
</script>

# Props

  • title

    • Heading title of the modal
    • type: string
    • defaultValue: ""
  • visible

    • Visibility of the modal
    • type: boolean
    • defaultValue: false
  • cross

    • Cross closing modal button
    • type: boolean
    • defaultValue: true
  • overlay

    • Whether to show the overlay
    • type: boolean
    • defaultValue: true
  • persistent

    • If true clicking outside will not dismiss the modal
    • type: boolean
    • defaultValue: false
  • transitionOverlay

    • overlay transition effect
    • type: string
    • defaultValue: "fade"
  • transitionModal

    • overlay transition effect
    • type: string
    • defaultValue: "fade"

# Slots

  • modal-bar

    • Use this slot to place content inside the modal bar.
  • close

    • Use this slot to place content inside the close button.
  • default

    • Use this slot to place content inside the modal.

# Events

  • close

# CSS modifiers

None.

# CSS custom properties (variables)

# Overridden other components CSS variables

  • --modal-width
  • --modal-top
  • --modal-left
  • --modal-bottom
  • --modal-right
  • --modal-transform
  • --modal-height
  • --modal-content-padding

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.