Modal
The Modal component is classic modal overlay, in which you can include any content you like.
Examples
Base
Teleport
The teleport
prop allows the modal to be "teleported" into any DOM node outside the DOM hierarchy of that component. By default, if only a boolean is passed, the modal will be teleported to the document body. In addition, any other destination can be passed as a value to the teleport
prop.
Dynamic Component
Instead of using the default slot, the component
prop allows to pass any component that will be programmatically rendered inside the modal. Furthermore, an inline component created with a render function can also be passed. Props and events can be passed to the component with props
and events
props too.
Programmatically
This component provides a programmatic interface that can be accessed by the useOruga()
composable.
Programmatically (with promises and async/await)
A programmatic instance returns a promise to await for. The promise gets resolved when the modal gets closed.
Modal component
Classic modal overlay to include any content you may need.
<o-modal></o-modal>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
active | Whether modal is active or not, use v-model:active to make it two-way binding | boolean | - | false |
animation | Custom animation (transition name) | string | - | From config: modal: { |
ariaLabel | Accessibility aria-label to be passed to the div wrapper element | string | - | From config: modal: { |
autoFocus | Automatically focus modal when active | boolean | - | From config: modal: { |
cancelable | Is Modal cancleable by clicking 'X', pressing escape or clicking outside | boolean | string[] | escape , x , outside , button , true , false | From config: modal: { |
clipScroll | Set true to remove the body scrollbar.When false , a non-scrollable scrollbar will be kept to avoid moving the background,but will set the body to a fixed position, which may break some layouts. | boolean | - | From config: modal: { |
closeIcon | Close icon name | string | - | From config: modal: { |
closeIconSize | Size of close icon | string | small , medium , large | From config: modal: { |
component | Component to be injected. Close the component by emitting a 'close' event — $emit('close') | Component | - | |
content | Text content, unnecessary when default slot is used | string | - | |
events | Events to be binded to the injected component | {} | - | |
fullScreen | Display modal as full screen | boolean | - | false |
mobileBreakpoint | Mobile breakpoint as max-width value | string | - | From config: modal: { |
overlay | Show an overlay | boolean | - | From config: modal: { |
override | Override existing theme classes completely | boolean | - | |
props | Props to be binded to the injected component | any | - | |
role | Role attribute to be passed to the div wrapper for better accessibility. | "alertdialog" | "dialog" | dialog , alertdialog | From config: modal: { |
teleport | Append the component to another part of the DOM. Set true to append the component to the body.In addition, any CSS selector string or an actual DOM node can be used. | boolean | object | string | - | From config: modal: { |
trapFocus | Trap focus inside the modal | boolean | - | From config: modal: { |
width | Width of the Modal | number | string | - | From config: modal: { |
Events
Event name | Properties | Description |
---|---|---|
update:active | value boolean - updated active prop | active prop two-way binding |
close | value unknown - close event data | on component close event |
Slots
Name | Description | Bindings |
---|---|---|
default | Modal default content, default is content prop | close (...args): void - function to close the component |
Class Inspector
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
rootClass | Class of the root element. | |||
mobileClass | Class of the root element when on mobile. 👉 Switch to mobile view to see it in action! | |||
activeClass | Class of the root element when active. | active | ||
overlayClass | Class of the overlay element. | |||
contentClass | Class of the content element. | |||
fullScreenClass | Class of the content element when fullscreen. | fullScreen | ||
closeClass | Class of the close button element. | |||
scrollClipClass | Class of the body when is open and scroll is clipped. | clipScroll | ||
scrollKeepClass | Class of the body when is open and scroll is keeped. | clipScroll |
Sass variables
Current theme ➜ Oruga
SASS Variable | Default |
---|---|
$modal-content-background-color | var(--#{$prefix}white) |
$modal-content-border-radius | var(--#{$prefix}base-border-radius) |
$modal-overlay-background-color | hsla(0, 0%, 4%, 0.86) |
$modal-close-border-radius | var( --#{$prefix}base-border-radius-rounded) |
$modal-close-right | 20px |
$modal-close-top | 20px |
$modal-close-size | 32px |
$modal-close-color | var(--#{$prefix}white) |
$modal-content-fullscreen-background-color | #f5f5f5 |
$modal-content-max-height | calc(100vh - 160px) |
$modal-content-margin | 0 auto |
$modal-zindex | 40 |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
The theme does not have any custom variables for this component.
Current theme ➜ Bootstrap
The theme does not have any custom variables for this component.