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.
md-dialog-content component.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:
The following options can be applied to any dialog, even on presets:
| Name | Description | Default |
|---|---|---|
| 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 |
| md-keep-alive Boolean | The dialog will be displayed with the v-show directive. This option can enable this behavior. | false |
The following props can be applied to alerts:
| Name | Description | Default |
|---|---|---|
| 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 |
The following options can be applied to confirms:
| Name | Description | Default |
|---|---|---|
| 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 |
The following options can be applied to prompts:
| Name | Description | Default |
|---|---|---|
| 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 |