quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
241 lines • 6.5 kB
JSON
{
"type": "component",
"meta": {
"docsUrl": "https://v1.quasar.dev/vue-components/dialog"
},
"behavior": {
"$listeners": {
"desc": "All native events are being propagated (you don't need the '.native' modifier)"
}
},
"props": {
"content-class": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Class definitions to be attributed to the content",
"examples": [
"my-special-class",
":content-class=\"{ 'my-special-class': <condition> }\""
],
"category": "style"
},
"content-style": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Style definitions to be attributed to the content",
"examples": [
"background-color: #ff0000",
":content-style=\"{ color: '#ff0000' }\""
],
"category": "style"
},
"value": {
"type": "Boolean",
"desc": "Model of the component defining shown/hidden state; Either use this property (along with a listener for 'input' event) OR use v-model directive",
"category": "model"
},
"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"
},
"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"
],
"examples": [
"top",
"right"
],
"category": "content"
},
"transition-show": {
"type": "String",
"desc": "One of Quasar's embedded transitions",
"examples": [
"fade",
"slide-down"
],
"category": "behavior",
"default": "scale"
},
"transition-hide": {
"type": "String",
"desc": "One of Quasar's embedded transitions",
"examples": [
"fade",
"slide-down"
],
"category": "behavior",
"default": "scale"
},
"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"
}
},
"slots": {
"default": {
"desc": "Default slot in the devland unslotted content of the component"
}
},
"events": {
"input": {
"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": "Object",
"desc": "JS event object",
"required": true
}
}
},
"before-show": {
"desc": "Emitted when component triggers show() but before it finishes doing it",
"params": {
"evt": {
"type": "Object",
"desc": "JS event object",
"required": true
}
}
},
"hide": {
"desc": "Emitted after component has triggered hide()",
"params": {
"evt": {
"type": "Object",
"desc": "JS event object",
"required": true
}
}
},
"before-hide": {
"desc": "Emitted when component triggers hide() but before it finishes doing it",
"params": {
"evt": {
"type": "Object",
"desc": "JS event object",
"required": true
}
}
},
"shake": {
"desc": "Shakes up the Dialog in order to catch user's attention"
},
"escape-key": {
"desc": "Emitted when ESC key is pressed; Does not get emitted if Dialog is 'persistent' or it has 'no-esc-key' set"
}
},
"methods": {
"show": {
"desc": "Triggers component to show",
"params": {
"evt": {
"type": "Object",
"required": false,
"desc": "JS event object"
}
}
},
"hide": {
"desc": "Triggers component to hide",
"params": {
"evt": {
"type": "Object",
"required": false,
"desc": "JS event object"
}
}
},
"toggle": {
"params": {
"evt": {
"type": "Object",
"required": false,
"desc": "JS event object"
}
},
"desc": "Triggers component to toggle between show/hide"
},
"focus": {
"desc": "Focus dialog; if you have content with autofocus attribute, it will directly focus it"
},
"shake": {
"desc": "Shakes dialog"
}
}
}