Dialogs inform 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, all form components and more.
Alternativelly you can use three presets to build Alerts, Confirms and Prompt dialogs.
The preset component is created on top of <md-dialog>. You should provide the content or the HTML content at least.
All the pressets can use the same options and events from the <md-dialog> component.
Name
Type
Description
md-click-outside-to-close
Boolean
Enable or disable click outside to close. Default: true
md-esc-to-close
Boolean
Enable or disable close on esc key. Default: true
md-backdrop
Boolean
Create an opaque backdrop behind the dialog. Default: true
md-open-from
String
The query selector of the element that is used to determine from which the Dialog will open.
md-close-to
String
The query selector of the element that is used to determine from which the Dialog will close.
Name
Value
Description
open
Receive the state of the dialog: ok| cancel
Works only for Confirm and Prompt
Triggered when the dialog open.
close
Receive the state of the dialog: ok| cancel
Works only for Confirm and Prompt
Triggered when the dialog closes.
Name
Description
open
Open the dialog.
close
Close the dialog.
Can display a title on the top of the Dialog.
No options available
Used to display rich content inside the Dialog.
No options available
Hold the actions of a dialog and align them on the right. Here you can add <md-button> with or without icons.
No options available
Name
Type
Description
md-title
String
Sets the alert title. Optional.
md-content
String
Sets the alert content.
md-content-html
String
Sets the alert content with a custom html.
md-ok-text
String
Sets the alert "Okay" button text.
Name
Type
Description
md-title
String
Sets the confirm title. Optional.
md-content
String
Sets the confirm content.
md-content-html
String
Sets the confirm content with a custom html.
md-ok-text
String
Sets the confirm "Okay" button text.
md-cancel-text
String
Sets the confirm "Cancel" button text.
Name
Type
Description
md-title
String
Sets the prompt title. Optional.
md-content
String
Sets the prompt content.
md-content-html
String
Sets the prompt content with a custom html.
md-ok-text
String
Sets the prompt "Okay" button text.
md-cancel-text
String
Sets the prompt "Cancel" button text.
v-model
String
A required model object to be bind when the value is confirmed.
md-input-id
String
Set the ID of the field inside the prompt dialog.
md-input-name
String
Set the name of the field inside the prompt dialog.
md-input-maxlength
String
Set the optional maxlength of the field inside the prompt dialog with the text count.
md-input-placeholder
String
Set the optional placeholder of the field inside the prompt dialog.
Lorem ipsum dolor sit amet
Nemo, nobis necessitatibus ut illo, ducimus ex.
Cancel
Ok
Create new note
Cancel
Create
Custom
add
<md-dialog md-open-from="#custom" md-close-to="#custom" ref="dialog1">
<md-dialog-title>Lorem ipsum dolor sit amet</md-dialog-title>
<md-dialog-content>Nemo, nobis necessitatibus ut illo, ducimus ex.</md-dialog-content>
<md-dialog-actions>
<md-button class="md-primary" @click="closeDialog('dialog1')">Cancel</md-button>
<md-button class="md-primary" @click="closeDialog('dialog1')">Ok</md-button>
</md-dialog-actions>
</md-dialog>
<md-dialog md-open-from="#fab" md-close-to="#fab" ref="dialog2">
<md-dialog-title>Create new note</md-dialog-title>
<md-dialog-content>
<form>
<md-input-container>
<label>Note</label>
<md-textarea></md-textarea>
</md-input-container>
</form>
</md-dialog-content>
<md-dialog-actions>
<md-button class="md-primary" @click="closeDialog('dialog2')">Cancel</md-button>
<md-button class="md-primary" @click="closeDialog('dialog2')">Create</md-button>
</md-dialog-actions>
</md-dialog>
<md-button class="md-primary md-raised" id="custom" @click="openDialog('dialog1')">Custom</md-button>
<md-button class="md-fab md-fab-bottom-right" id="fab" @click="openDialog('dialog2')">
<md-icon>add</md-icon>
</md-button>
export default {
methods: {
openDialog(ref) {
this.$refs[ref].open();
},
closeDialog(ref) {
this.$refs[ref].close();
},
onOpen() {
console.log('Opened');
},
onClose(type) {
console.log('Closed', type);
}
}
};
Alert
Alert with HTML
<md-dialog-alert
:md-content="alert.content"
:md-ok-text="alert.ok"
@open="onOpen"
@close="onClose"
ref="dialog3">
</md-dialog-alert>
<md-dialog-alert
:md-title="alert2.title"
:md-content-html="alert2.contentHtml"
@open="onOpen"
@close="onClose"
ref="dialog4">
</md-dialog-alert>
<md-button class="md-primary md-raised" @click="openDialog('dialog3')">Alert</md-button>
<md-button class="md-primary md-raised" @click="openDialog('dialog4')">Alert with HTML</md-button>
export default {
data: () => ({
alert: {
content: 'Your post has been deleted!',
ok: 'Cool!'
},
alert2: {
title: 'Post created!',
contentHtml: 'Your post <strong>Material Design is awesome</strong> has been created.'
}
}),
methods: {
openDialog(ref) {
this.$refs[ref].open();
},
closeDialog(ref) {
this.$refs[ref].close();
},
onOpen() {
console.log('Opened');
},
onClose(type) {
console.log('Closed', type);
}
}
};
Confirm
<md-dialog-confirm
:md-title="confirm.title"
:md-content-html="confirm.contentHtml"
:md-ok-text="confirm.ok"
:md-cancel-text="confirm.cancel"
@open="onOpen"
@close="onClose"
ref="dialog5">
</md-dialog-confirm>
<md-button class="md-primary md-raised" @click="openDialog('dialog5')">Confirm</md-button>
export default {
data: () => ({
confirm: {
title: 'Use Google\'s location service?',
contentHtml: 'Let Google help apps determine location. <br> This means sending <strong>anonymous</strong> location data to Google, even when no apps are running.',
ok: 'Agree',
cancel: 'Disagree'
}
}),
methods: {
openDialog(ref) {
this.$refs[ref].open();
},
closeDialog(ref) {
this.$refs[ref].close();
},
onOpen() {
console.log('Opened');
},
onClose(type) {
console.log('Closed', type);
}
}
};
Prompt
<md-dialog-prompt
:md-title="prompt.title"
:md-ok-text="prompt.ok"
:md-cancel-text="prompt.cancel"
@open="onOpen"
@close="onClose"
ref="dialog6">
</md-dialog-prompt>
<md-button class="md-primary md-raised" @click="openDialog('dialog6')">Prompt</md-button>
export default {
data: () => ({
prompt: {
title: 'What\'s your name?',
ok: 'Done',
cancel: 'Cancel',
id: 'name',
name: 'name',
placeholder: 'Type your name...',
maxlength: 30,
value: ''
}
}),
methods: {
openDialog(ref) {
this.$refs[ref].open();
},
closeDialog(ref) {
this.$refs[ref].close();
},
onOpen() {
console.log('Opened');
},
onClose(type) {
console.log('Closed', type);
}
}
};