quasar/dist/api/QDialog.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{"type":"component","meta":{"docsUrl":"https://v2.quasar.dev/vue-components/dialog"},"props":{"transition-show":{"type":"String","desc":"One of Quasar's embedded transitions","examples":["'fade'","'slide-down'"],"category":"transition","default":"'fade'","required":false},"transition-hide":{"type":"String","desc":"One of Quasar's embedded transitions","examples":["'fade'","'slide-down'"],"category":"transition","default":"'fade'","required":false},"transition-duration":{"type":["String","Number"],"desc":"Transition duration (in milliseconds, without unit)","default":"300","category":"transition","required":false},"model-value":{"type":["Boolean","null"],"desc":"Model of the component defining shown/hidden state; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive","default":"null","category":"model","examples":["# v-model=\"state\""],"required":false},"persistent":{"type":"Boolean","desc":"User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won't dismiss it","category":"behavior"},"no-esc-dismiss":{"type":"Boolean","desc":"User cannot dismiss Dialog by hitting ESC key; No need to set it if 'persistent' prop is also set","category":"behavior"},"no-backdrop-dismiss":{"type":"Boolean","desc":"User cannot dismiss Dialog by clicking outside of it; No need to set it if 'persistent' prop is also set","category":"behavior"},"no-route-dismiss":{"type":"Boolean","desc":"Changing route app won't dismiss Dialog; No need to set it if 'persistent' prop is also set","category":"behavior"},"auto-close":{"type":"Boolean","desc":"Any click/tap inside of the dialog will close it","category":"behavior"},"seamless":{"type":"Boolean","desc":"Put Dialog into seamless mode; Does not use a backdrop so user is able to interact with the rest of the page too","category":"content"},"backdrop-filter":{"type":"String","desc":"Apply a backdrop filter; The value needs to be the same as in the CSS specs for backdrop-filter; The examples are not an exhaustive list","examples":["'blur(4px)'","'blur(4px) saturate(150%)'","'brightness(60%)'","'invert(70%)'","'grayscale(100%)'","'contrast(40%)'","'hue-rotate(120deg)'","'sepia(90%)'","'saturate(80%)'","'none'"],"category":"style","addedIn":"v2.15"},"maximized":{"type":"Boolean","desc":"Put Dialog into maximized mode","category":"content"},"full-width":{"type":"Boolean","desc":"Dialog will try to render with same width as the window","category":"content"},"full-height":{"type":"Boolean","desc":"Dialog will try to render with same height as the window","category":"content"},"position":{"type":"String","desc":"Stick dialog to one of the sides (top, right, bottom or left)","default":"'standard'","values":["'standard'","'top'","'right'","'bottom'","'left'"],"category":"content","required":false},"square":{"type":"Boolean","desc":"Forces content to have squared borders","category":"style"},"no-refocus":{"type":"Boolean","desc":"(Accessibility) When Dialog gets hidden, do not refocus on the DOM element that previously had focus","category":"behavior"},"no-focus":{"type":"Boolean","desc":"(Accessibility) When Dialog gets shown, do not switch focus on it","category":"behavior"},"no-shake":{"type":"Boolean","desc":"Do not shake up the Dialog to catch user's attention","category":"behavior","addedIn":"v2.1.1"},"allow-focus-outside":{"type":"Boolean","desc":"Allow elements outside of the Dialog to be focusable; By default, for accessibility reasons, QDialog does not allow outer focus","category":"behavior","addedIn":"v2.7.2"}},"slots":{"default":{"desc":"Default slot in the devland unslotted content of the component"}},"events":{"update:model-value":{"desc":"Emitted when showing/hidden state changes; Is also used by v-model","params":{"value":{"type":"Boolean","desc":"New state (showing/hidden)"}}},"show":{"desc":"Emitted after component has triggered show()","params":{"evt":{"type":"Event","desc":"JS event object","required":true}}},"before-show":{"desc":"Emitted when component triggers show() but before it finishes doing it","params":{"evt":{"type":"Event","desc":"JS event object","required":true}}},"hide":{"desc":"Emitted after component has triggered hide()","params":{"evt":{"type":"Event","desc":"JS event object","required":true}}},"before-hide":{"desc":"Emitted when component triggers hide() but before it finishes doing it","params":{"evt":{"type":"Event","desc":"JS event object","required":true}}},"shake":{"desc":"Emitted when the Dialog shakes in order to catch user's attention, unless the 'no-shake' property is set"},"escape-key":{"desc":"Emitted when ESC key is pressed; Does not get emitted if Dialog is 'persistent' or it has 'no-esc-dismiss' set"}},"methods":{"show":{"desc":"Triggers component to show","params":{"evt":{"type":"Event","desc":"JS event object","required":false}},"returns":null},"hide":{"desc":"Triggers component to hide","params":{"evt":{"type":"Event","desc":"JS event object","required":false}},"returns":null},"toggle":{"desc":"Triggers component to toggle between show/hide","params":{"evt":{"type":"Event","desc":"JS event object","required":false}},"returns":null},"focus":{"desc":"Focus dialog; if you have content with autofocus attribute, it will directly focus it","params":{"selector":{"type":"String","required":false,"desc":"Optional CSS selector to override default focusable element","examples":["'[tabindex]:not([tabindex=\"-1\"])'"],"addedIn":"v2.6.5"}},"returns":null},"shake":{"desc":"Shakes dialog","params":{"focusTarget":{"type":"Element","desc":"Optional DOM Element to be focused after shake","examples":["document.getElementById('example')"],"addedIn":"v2.10.1"}},"returns":null}},"computedProps":{"contentEl":{"type":"Element","desc":"The DOM Element of the rendered content","addedIn":"v2.10.1"}}}