Skip to content

Modal.md

Latest commit

 

History

History
131 lines (95 loc) · 17.1 KB

Modal.md

File metadata and controls

131 lines (95 loc) · 17.1 KB
title Modal

Modal

Deprecated Since v0.13.0 - use the ODialog component instead

The Modal component is a classic modal overlay in which you can include any content you like. The content under the overlay is inert, meaning users cannot interact with content outside the active modal window. By default, modal overlays contain their own tab sequence so that users cannot navigate outside the component. The component supports the W3C ARIA APG Dialog (Modal) Pattern as well as the W3C ARIA APG Alert and Message Dialogs Pattern.

Examples

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
alert This enables the alertdialog role, allowing assistive technologies and browsers to distinguish alert modals from other modals.
Alert modals interrupt the user's workflow to communicate an important messages and acquire an explicit response.		 boolean -
From config:
modal: {
  alert: false
}
animation Custom animation (transition name) string -
From config:
modal: {
  animation: "zoom-out"
}
ariaCloseLabel Accessibility label for the close button string -
From config:
modal: {
  ariaCloseLabel: "Close"
}
ariaLabel Accessibility aria-label to be passed to the div wrapper element string -
From config:
modal: {
  ariaLabel: undefined
}
autoFocus Automatically focus modal when active boolean -
From config:
modal: {
  autoFocus: true
}
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: {
  clipScroll: false
}
closeIcon Close icon name string -
From config:
modal: {
  closeIcon: "close"
}
closeIconSize Size of close icon string small, medium, large
From config:
modal: {
  closeIconSize: "medium"
}
closeOnEscape Close when pressing escape key boolean -
From config:
modal: {
  closeOnEscape: true
}
closeOnOutside Close when clicked outside of the panel boolean -
From config:
modal: {
  closeOnOutside: true
}
closeable Adds close button to the header boolean -
From config:
modal: {
  closeable: true
}
component Component to be injected.
Close the component by emitting a 'close' event — $emit('close')		 C -
content Text content, unnecessary when default slot is used string -
events Events to be binded to the injected component EmitsToProps<ComponentEmit<C>> -
fullScreen Display modal as full screen boolean - false
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
From config:
modal: {
  iconPack: undefined
}
mobileBreakpoint Mobile breakpoint as max-width value string -
From config:
modal: {
  mobileBreakpoint: undefined
}
overlay Show an overlay background boolean -
From config:
modal: {
  overlay: true
}
override Override existing theme classes completely boolean -
props Props to be binded to the injected component ComponentProps<C> -
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: {
  teleport: false
}
trapFocus Trap focus inside the modal boolean -
From config:
modal: {
  trapFocus: true
}
width Width of the Modal Numberish -
From config:
modal: {
  width: 960
}

Events

Event name Properties Description
update:active value boolean - updated active prop active prop two-way binding
close event Event - native event on active state changes to false

Slots

Name Description Bindings
default Modal default content, default is content prop clsoe (...args): void - function to close the component
close Define a custom close icon

Class Inspector

Sass Variables

Current theme ➜ Oruga

SASS Variable Default
$modal-zindex map.get(vars.$zindex, "fixed")
$modal-overlay-background-color h.useVar("overlay-background-color")
$modal-overlay-zindex map.get(vars.$zindex, "overlay")
$modal-content-zindex map.get(vars.$zindex, "modal")
$modal-content-max-height calc(100vh - 160px)
$modal-content-max-width calc(100vw - 160px)
$modal-content-box-shadow h.useVar("overlay-box-shadow")
$modal-content-border-radius h.useVar("border-radius")
$modal-content-background-color h.useVar("control-background-color")
$modal-close-top 20px
$modal-close-right 20px
$modal-close-color h.useVar("white")
$modal-close-size 2rem
$modal-close-border-radius h.useVar("border-radius-rounded")
$modal-close-background-color h.useVar("control-shadow-color")

See ➜ 📄 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.