Skip to content
On this page

NcModal

Props

Prop nameDescriptionTypeValuesDefault
titleTitle to be shown with the modalstring-''
hasPreviousDeclare if a previous slide is availableboolean-false
hasNextDeclare if a next slide is availableboolean-false
outTransitionDeclare if hiding the modal should be animatedboolean-false
enableSlideshowDeclare if the slideshow functionality should be enabledboolean-false
slideshowDelayDeclare the slide intervalnumber-5000
slideshowPausedAllow to pause an ongoing slideshowboolean-false
enableSwipeEnable swipe between slidesboolean-true
spreadNavigationboolean-false
sizeDefines the modal size.
Default is 'normal'.
Available are 'small', 'normal', 'large' and 'full'.
All sizes except 'small' change automatically to full-screen on mobile.
string-'normal'
canCloseDeclare if the modal can be closedboolean-true
darkMakes the modal backdrop black if trueboolean-false
containerSelector for the modal container, pass null to prevent automatic container mountingstring|null-'body'
closeButtonContainedPass in false if you want the modal 'close' button to be displayed
outside the modal boundaries, in the top right corner of the window
boolean-true
additionalTrapElementsAdditional elements to add to the focus traparray-[]
inlineActionsDisplay x items inline<br/>@see Actions component usagenumber-0

Events

Event namePropertiesDescription
previous
next
closeEmitted when the closing animation is finished

Slots

NameDescriptionBindings
actionsList of actions to show
defaultModal content to render

loading...
loading...

Usage of popover in modal

  • Set container property to .modal-mask to inject popover context of the modal:
loading...