Dialog
Quasar Dialogs are a great way to offer the user the ability to choose a specific action or list of actions. They also can provide the user with important information, or require them to make a decision (or multiple decisions).
From a UI perspective, you can think of Dialogs as a type of “floating” modal, which covers only a portion of the screen. This means Dialogs should only be used for quick actions, like password verification, small App notifications or quick options. More in depth user flows should be reserved for Modals.
Dialogs can be used either as a component in your Vue file templates (for complex use-cases, like specific form components with validation etc), or as a globally available method (for some basic use cases, equivalent to native JS alert(), prompt(), …).
Basic Usage as a Method
framework: { |
Now let’s see how we can use it:
// outside of a Vue file |
Basic syntax for the config object:
this.$q.dialog({ |
Handling Outcome
this.$q.dialog({...}) |
Examples
Alert
this.$q.dialog({ |
Confirm
this.$q.dialog({ |
Prompt
this.$q.dialog({ |
Single Choice Selection
this.$q.dialog({ |
Multiple Choice Selection
this.$q.dialog({ |
Stacked Buttons
this.$q.dialog({ |
Custom Buttons
this.$q.dialog({ |
Prevent accidental close
this.$q.dialog({ |
Basic Usage As a Component
framework: { |
Now let’s see how we can use it:
<template> |
QDialog Vue Properties
Vue Property | Type | Description |
---|---|---|
title
|
String | Title of Dialog. |
message
|
String | Message of Dialog. |
prompt
|
Object | Check below table for details. |
options
|
Object | Check below table for details. |
ok
|
Boolean/String/Object | Do we have an OK button? Optionally specify which label to use for it OR the button props in an Object. |
cancel
|
Boolean/String/Object | Do we have a Cancel button? Optionally specify which label to use for it OR the button props in an Object. |
stack-buttons
|
Boolean | Stack buttons vertically instead of default horizontally. |
prevent-close
|
Boolean | Dialog can be dismissed only by clicking/tapping on OK/Cancel buttons. |
no-esc-dismiss
|
Boolean | “ESC” key won’t dismiss the Dialog. Overriden to “true” if “prevent-close” is “true”. |
no-refocus
|
Boolean | Do not refocus (on dialog close) the element that had focus before opening (by default it tries to refocus) |
no-backdrop-dismiss
|
Boolean | Click/Tap on backdrop won’t dismiss Dialog. Overriden to “true” if “prevent-close” is “true”. |
position
|
String | Position of Dialog (top, bottom, left, right). |
color
|
String | A color from Quasar Color Palette . |
no-refocus
|
Boolean | (v0.15.11+) Do not refocus previously focused DOM element after closing the Dialog. |
{ |
{ |
QDialog Vue Events
Vue Property | Description |
---|---|
@ok
|
When “props.ok()” got called. |
@cancel
|
When “props.cancel()” got called. |
@show
|
Dialog has just been showed to the user. |
@hide
|
Dialog has been hidden (regardless of outcome). |
@escape-key
|
Dialog dismissed with ESCAPE key. |