Modal

<sw-modal>

ready
Modal box component which can be displayed in different variants and sizes

Usage

Loading...
<sw-modal title="Modal box title" selector=".example .panel--content" style="height: 400px">
    Lorem Ipsum
</sw-modal>

Component properties

Property name Type Default
title String
size String
variant String default
isLoading Boolean false
selector String body
showHeader Boolean true

Methods

Method name Parameters
createdComponent No parameters
mountedComponent No parameters
destroyedComponent No parameters
setFocusToModal No parameters
closeModalOnClickOutside domEvent
closeModal No parameters
closeModalOnEscapeKey event

Imports

  • ./sw-modal.html.twig
  • ./sw-modal.scss

Inject

  • shortcutService

SASS variables

Variable name Value
$sw-modal-color-backdrop rgba(0, 0, 0, 0.4)
$sw-modal-gap 64px
$sw-modal-loader-z-index $z-index-modal + 1
$sw-modal-title-font-size 18px
$sw-modal-transition-duration .4s
$sw-modal-transition-timing-function cubic-bezier(.68, -0.55, .26, 1.55)

Twig blocks

  • sw_modal_close
  • sw_modal_close_icon
  • sw_modal_close_button
  • sw_modal_slot_header
  • sw_modal_header
  • sw_modal_loader
  • sw_modal_slot_default
  • sw_modal_body
  • sw_modal_slot_footer
  • sw_modal_footer
  • sw_modal_dialog
  • sw_modal_element
  • sw_modal

Slots

  • modal-header
  • modal-loader
  • default
  • modal-footer