Basic usage

    1. <button class="btn btn-success" @click="showModal()">
    2.     Open Modal
    3. </button>
    4.  
    5. <VaModal v-model="isModalOpen" title="Basic Modal" message="Modal Content"/>
    1. import VaModal from '/vuestic-components/va-modal/VaModal'
    2. export default {
    3.   name: 'modals',
    4.   components: {
    5.     VaModal
    6.   },
    7.   data () {
    8.     return {
    9.       isOpen: false
    10.     }
    11.   },
    12.   methods: {
    13.     showModal () {
    14.       this.isOpen = true;
    15.     }
    16.   }
    17.   // ...
    18. }

    Props

    • value - Boolean - controls visibility of modal
    • position - String - use size='top' to set the position of modal. Use one of these values ['top', 'right', 'bottom', 'left']
    • size - String (default: 'medium') - use :size="small" to set the size of modal. Use one of these values ['small', 'medium', 'large']
    • closeButton - Boolean (default: false) - use closeButton to show close icon on the top right
    • fullscreen - Boolean (default false) - use fullscreen to show modal in fullscreen mode
    • mobileFullscreen - Boolean (default: true) - use mobile-fullscreen: false to prevent fullscreeen mode on mobile devices
    • maxWidth - String - use max-width string. You can use any line as in ordinary css. 300px, 30% etc.
    • maxHeight - String (default 90vh) - use max-height to change the maximum height of the modal. If content is larger, scroll will appear
    • noEscDismiss - Boolean (default: false) - use no-esc-dismiss: true to disallow close modal on esc button click
    • noOutsideDismiss - Boolean (default false) - use no-outside-dismiss: true to disallow close modal when outside modal was clicked
    • hideDefaultActions - Boolean (default: false) - use hideDefaultActions: true to hide Cancel and Ok buttons
    • okText - String (default: 'OK') - use okText="Some Text Here" to set text in confirm button
    • cancelText - String (default: 'Cancel') - use cancelText="Some Text Here" to set text in cancel button
    • fixedLayout - Boolean (default: false) - use fixedLayout: true to scroll only content in modal. Title and actions will be fixed

    • withoutTransitions - Boolean (default: false) - use withoutTransitions: true to turn off the animations on the modal
      Events

    • onOk - action, that happens if user clicks on "OK" button

    • onCancel - action, that happens if user clicks on "Cancel" button or close icon
      Slots

    • default - the main content of the modal

    • header - appears after the title in the modal
    • actions - appears after the default actions at the bottom of the modal
      Find DEMOs here!