Modal component

The Modal component provides a versatile and user-friendly way to display content in a focused, interruptive view. Ideal for prompts, forms, or any content that requires user interaction, our Modal ensures that the content within is front and center.

Usage

  import { RModal } from '@rebilly/revel';

  <r-modal v-show="true" title="Modal">
    <template #content>
      <p>Modal content</p>
    </template>
  </r-modal>

Examples

modal-simple.vue

Multi-content

modal-multiple-content.vue

Multi-step

modal-multi-step.vue

Name	Type	Default	Description
show	boolean	true	Use this prop to conditionally show the modal from the outside
title	Nullable, string	null	Adds a title to the modal
cancelLabel	string	'Cancel'	Adds a label to the cancel button
size	Nullable, ModalSize	null	Adds a size to the modal
scroll	boolean	false	Adds a scroll to the modal
scrollContent	boolean	false	Adds a scroll to the content of the modal. Only works when using it with the `content` slot
duration	number	0.15	Adds a duration to the modal transition

Name	Description
header-actions	Header actions container
contents	Content area for border-separated pieces of content
content	Content area for a single piece of content
left-actions	Left side of the footer actions container
right-actions	Right side of footer actions container
actions	Default footer actions container

Name	Description
close
submit
leave
enter