HomeAccordionCheckboxDropdownModalPopupProgressRatingSidebar

ui-modal

Usage

<ui-modal type="basic" title="Confirm account removal">
    <div class="content">Are you sure you want to delete this account?</div>
</ui-modal>
Are you sure you want to delete this account?

Behavior

$toggle()
$show()
$hide()
$isActive()

Attributes

type {String} Default: 'standard'

The type of the modal can be 'standard' or 'basic'

title {String}

The title appears at the top of the modal. The default value is an empty string.

size {String}

The size of the modal can be 'fullscreen', 'small' or 'large'

<ui-modal title="Confirm publication" size="fullscreen">
    <div class="content">Are you sure you want to publish this document?</div>
</ui-modal>

Events

A ui-modal instance emits two events:

  • 'approved' when the positive action button is clicked
  • 'denied' when the negative action button is clicked

You can listen for these events in the following way:

var modal = new Modal({ ... });
modal.$on('approved', function(){ })
modal.$on('denied', function(){ })

Customizing the <content>

Here is the Jade template of this component. The content blocks can be replaced using a selector. Important: Make sure you include all the Vue.js directives as in the original template for the Component to work.