Skip to content

Modal

Modal works thanks to the atom Overlay, which, in turn, is based on the store overlay. Modal molecule is a central window, displayed on a transparent background. Modal contains only one slot for ModalHeader and ModalFooter. There may be any content between them.

Modal supports the blocking of the scroll position, and in addition, to avoid the width jump effect, set:

css
body {
  overflow-y: scroll;
}

Props

templateId
Indicates what element it is displayed with overlay
type:String
default:modal
canClose
It can block the possibility of closing the modal by clicking outside its area
type:Boolean
default:true

Examples

Modal with ModalHeader
html
<btn @click="displaySample()" color="primary" text="openModal" />
<modal>
  <modal-header orientation="horizontal" :iconfile="times" title="Deactivate account"
    >Are you sure you want to deactivate your account? All of your data will be permanently removed
    from our servers forever. This action cannot be undone.
  </modal-header>
  <modal-footer full decline="Cancel" accept="Accept action" />
</modal>
<overlay :canClose="true" />
ts
import { useOverlayStore } from '@riupress/ui'

const useOverlay = useOverlayStore()
function displaySample() {
  useOverlay.show('modal')
}
function closeModal() {
  useOverlay.updateShowTemplate(false)
  useOverlay.updateShow(false)
}

WARNING

Przezroczysta warstwa czyli Overlay jest stosowane z wieloma komponentami i w związku z tym powinna być użyta raz, globalnie np w layout'cie.