# BottomModal

Bottom Modal component

# Most common usage scenario

<template>
  <div>
    <div style="position: relative;">
      <SfButton @click="isOpen = !isOpen">
        Open bottom modal
      </SfButton>
      <SfBottomModal
        :is-open="isOpen"
        :title="title"
        @click:close="isOpen = !isOpen"
      >
        YOUR CONTENT
      </SfBottomModal>
    </div>
  </div>
</template>
<script>
import { SfBottomModal } from "@storefront-ui/vue";
import { SfButton } from "@storefront-ui/vue";
import {} from "@storefront-ui/vue";
export default {
  components: {
    SfBottomModal,
    SfButton,
  },
  data() {
    return {
      isOpen: false,
      title: "Title",
    };
  },
};
</script>

# Props

  • isOpen

    • Bottom Modal is open
    • type: boolean
    • defaultValue: false
  • title

    • Bottom Modal title
    • type: string
    • defaultValue: ""

# Slots

  • title

    • Use this slot to replace title.
  • close-desktop

    • Use this slot to replace close button for desktop.
  • default

    • Use this slot to replace content.
  • close-mobile

    • Use this slot to replace close button for mobile.

# Events

  • click:close

# CSS modifiers

None.

# CSS custom properties (variables)

  • --bottom-modal-position
  • --bottom-modal-width
  • --bottom-modal-top
  • --bottom-modal-bottom
  • --bottom-modal-transform
  • --bottom-modal-container-padding
  • --bottom-modal-background
  • --bottom-modal-container-font
  • --bottom-modal-container-font-weight
  • --bottom-modal-container-font-size
  • --bottom-modal-container-font-line-height
  • --bottom-modal-container-font-family
  • --bottom-modal-height
  • --bottom-modal-title-padding
  • --bottom-modal-title-color
  • --bottom-modal-title-text-align
  • --bottom-modal-animation-enter
  • --bottom-modal-animation-leave

# Overridden other components CSS variables

  • --characteristic-description-font
  • --font-base
  • --characteristic-description-font
  • --font-semibold
  • --list-item-margin
  • --button-text-transform
  • --characteristic-description-font
  • --font-sm
  • --heading-title-font
  • --font-normal
  • --heading-title-font
  • --font-xs
  • --heading-title-font
  • --font-bold
  • --button-background
  • --button-display
  • --button-color
  • --bottom-modal-time

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.