Oruga

# Modal

Classic modal overlay to include any content you may need

edit on github

# Examples

# Base

# Programmatically

# Programmatically (with promises and async/await)

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
closeClass Class of the close button.
contentClass Class of the modal content.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
fullScreenClass Class of the modal when fullscreen. fullScreen
mobileClass Class of modal component when on mobile.
👉 Switch to mobile view to see it in action!
overlayClass Class of the modal overlay.
rootClass Class of the root element.


# Props

Prop name Description Type Values Default
active Whether modal is active or not, use the .sync modifier (Vue 2.x) or v-model:active (Vue 3.x) to make it two-way binding boolean -
animation Custom animation (transition name) string -
From config

modal: {
  animation: 'zoom-out'
}
ariaLabel string -
ariaModal boolean -
ariaRole string -
autoFocus Automatically focus modal when active boolean -
From config

modal: {
  autoFocus: true
}
canCancel Can close Modal by clicking 'X', pressing escape or clicking outside array|boolean escape, x, outside, button
From config

modal: {
  canCancel: ['escape', 'x', 'outside', 'button']
}
closeIcon Icon name string -
From config

modal: {
  closeIcon: 'close'
}
closeIconSize string - 'medium'
component Component to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — this.$emit('close') object|func -
content Text content string -
destroyOnHide Destroy modal on hide boolean -
From config

modal: {
  destroyOnHide: true
}
events Events to be binded to the injected component object -
fullScreen Display modal as full screen boolean -
mobileBreakpoint Mobile breakpoint as max-width value string -
onCancel Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside) func - Default function (see source code)
onClose Callback function to call after close (programmatically close or user canceled) func - Default function (see source code)
override Override classes boolean - false
props Props to be binded to the injected component object -
scroll clip to remove the body scrollbar, keep to have a non scrollable scrollbar to avoid shifting background, but will set body to position fixed, might break some layouts string keep, clip
From config

modal: {
  scroll: 'keep'
}
trapFocus Trap focus inside the modal. boolean -
From config

modal: {
  trapFocus: true
}
width Width of the Modal string|number -
From config

modal: {
  width: 960
}

# Events

Event name Properties Description
close
update:active

# Slots

Name Description Bindings
default

# Style

CSS Variable SASS Variable Default
--oruga-modal-content-background-color $modal-content-background-color $white
--oruga-modal-content-border-radius $modal-content-border-radius $base-border-radius
--oruga-modal-overlay-background-color $modal-overlay-background-color hsla(0,0%,4%,.86)
--oruga-modal-close-border-radius $modal-close-border-radius $base-rounded-border-radius
--oruga-modal-close-right $modal-close-right 20px
--oruga-modal-close-top $modal-close-top 20px
--oruga-modal-close-size $modal-close-size 32px
--oruga-modal-close-color $modal-close-color $white
--oruga-modal-content-fullscreen-background-color $modal-content-fullscreen-background-color #f5f5f5
--oruga-modal-content-max-height $modal-content-max-height calc(100vh - 160px)
--oruga-modal-content-margin $modal-content-margin 0 auto
--oruga-modal-zindex $modal-zindex 40

← Notification/Toast →