A modal with a component. When you want to close the Modal, call the 'close' method —
this.$parent.close()
— from the injected component.
trap-focus
prop could be useful in this case.
# Component
A modal with a component. When you want to close the Modal, call the 'close' method —
this.$parent.close()
— from the injected component.
trap-focus
prop could be useful in this case.
# Programmatic
Syntax:
# Full Screen
Add the full-screen
prop to cover the whole page.
Name | Description | Type | Values | Default |
---|---|---|---|---|
active | Whether modal is active or not, use the .sync modifier to make it two-way binding | Boolean | — | false |
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, Function | — | — |
parent | Parent component of the modal, required if using component | Vue | — | — |
props | Props to be binded to the injected component | Object | — | — |
events | Events to be binded to the injected component | Object | — | — |
content | HTML content | String | — | — |
width | Width of the Modal | Number, String | — | 960 |
full-screen | Display modal as full screen | Boolean | — | false |
has-modal-card | If your modal content has a .modal-card as root, add this prop or the card might break on mobile | Boolean | — | false |
animation | Custom animation (transition name) | String | — | zoom-out |
can-cancel | Can close Modal by clicking 'X', pressing escape or clicking outside | Boolean, Array | escape , x , outside | ['escape', 'x', 'outside'] |
on-cancel | Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside) | Function | — | — |
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 | clip , keep | clip |
trap-focus | Trap focus inside the modal. | Boolean | — | false |
custom-class | CSS classes to be applied on modal | String | — | — |
aria-role | Role attribute to be passed to modal container for better accessibility. | String | dialog , alertdialog | — |
aria-modal | Improve accessiblity when enabled. | Boolean | — | false |
This page is open source. Noticed a typo or something's unclear?