Vue Material -

Dialog

Dialogs informs users about a specific task and may contain critical information, require decisions, or involve multiple tasks. The dialog component works with any plain html content. You can have tabs inside, all form components and many more.

The component can be used with a custom markup, using the auxiliary components or with presets made by Vue Material. Those presets emulates the default Dialogs from Javascript, like confirm, alert and prompt.

Dialog

The Dialog component can have any HTML markup inside. This allows you to create rich dialog content, like the details of a table row, for example:

Custom Dialog Markup

API - md-dialog

The following options can be applied to any dialog, even on presets:

NameDescriptionDefault
md-active Boolean The prop to show/hide the dialog. Should be used with the .sync modifier. false
md-backdrop Boolean Enable/disable the dialog overlay true
md-close-on-esc Boolean By the default the dialog will close when pressing esc. To disabled that, just set this prop as false true
md-click-outside-to-close Boolean By the default the dialog will close when clicking outsite. To disabled that, just set this prop as false true
md-fullscreen Boolean The dialog will become fullscreen on mobile screens. This option can disable this behavior. true

Alerts

Accepts custom HTML too!

API - md-dialog-alert

The following props can be applied to alerts:

NameDescriptionDefault
md-title String The alert title. Optional. null
md-content String The alert content. Accepts HTML. Optional. null
md-confirm-text String The text inside confirm button Ok

Confirms

Accepts custom HTML too!

API - md-dialog-confirm

The following options can be applied to confirms:

NameDescriptionDefault
md-title String The alert title. Optional. null
md-content String The alert content. Accepts HTML. Optional. null
md-confirm-text String The text inside confirm button Ok
md-cancel-text String The text inside cancel button Cancel

Prompts

Look at the character count!

API - md-dialog-prompt

The following options can be applied to prompts:

NameDescriptionDefault
v-model String|Number The model variable to bind the input prompt value null
md-input-name String The input name attribute null
md-input-id String The input id attribute null
md-input-max-length Number Enables the character count, based on the given value. null
md-input-placeholder Number Sets a optional placeholder on input. null
md-title String The alert title. Optional. null
md-content String The alert content. Accepts HTML. Optional. null
md-confirm-text String The text inside confirm button Ok
md-cancel-text String The text inside cancel button Cancel