quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
1,123 lines • 40.2 kB
JSON
{
"type": "plugin",
"meta": {
"docsUrl": "https://v1.quasar.dev/quasar-plugins/notify"
},
"injection": "$q.notify",
"quasarConfOptions": {
"propName": "notify",
"definition": {
"type": {
"type": "String",
"desc": "Optional type (that has been previously registered) or one of the out of the box ones ('positive', 'negative', 'warning', 'info', 'ongoing')",
"examples": [
"negative",
"custom-type"
],
"addedIn": "v1.9.0"
},
"color": {
"type": "String",
"desc": "Color name for component from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style"
},
"textColor": {
"type": "String",
"desc": "Color name for component from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style"
},
"message": {
"type": "String",
"desc": "The content of your message",
"examples": [
"John Doe pinged you"
]
},
"caption": {
"type": "String",
"desc": "The content of your optional caption",
"examples": [
"5 minutes ago"
],
"addedIn": "v1.5.5"
},
"html": {
"type": "Boolean",
"desc": "Render message as HTML; This can lead to XSS attacks, so make sure that you sanitize the message first"
},
"icon": {
"type": "String",
"desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix",
"examples": [
"map",
"ion-add",
"img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
"img:statics/path/to/some_image.png"
],
"category": "content"
},
"avatar": {
"type": "String",
"desc": "URL to an avatar/image; Suggestion: use statics folder",
"examples": [
"(statics folder) statics/img/something.png",
"(relative path format) require('./my_img.jpg')",
"(URL) https://some-site.net/some-img.gif"
]
},
"spinner": {
"type": "Boolean",
"desc": "Useful for notifications that are updated; Displays the default Quasar spinner instead of an avatar or icon",
"addedIn": "v1.14.0"
},
"position": {
"type": "String",
"desc": "Window side/corner to stick to",
"default": "bottom",
"values": [
"top-left",
"top-right",
"bottom-left",
"bottom-right",
"top",
"bottom",
"left",
"right",
"center"
],
"examples": [
"top-right"
]
},
"group": {
"type": [
"Boolean",
"String",
"Number"
],
"desc": "Override the auto generated group with custom one; Grouped notifications cannot be updated; String or number value inform this is part of a specific group, regardless of its options; When a new notification is triggered with same group name, it replaces the old one and shows a badge with how many times the notification was triggered",
"default": "(message + caption + multiline + actions labels + position)",
"examples": [
"my-group"
],
"addedIn": "v1.9.0"
},
"badgeColor": {
"type": "String",
"desc": "Color name for the badge from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style",
"addedIn": "v1.9.0"
},
"badgeTextColor": {
"type": "String",
"desc": "Color name for the badge text from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style",
"addedIn": "v1.9.0"
},
"badgePosition": {
"type": "String",
"desc": "Notification corner to stick badge to; If notification is on the left side then default is top-right otherwise it is top-left",
"default": "(top-left/top-right)",
"values": [
"top-left",
"top-right",
"bottom-left",
"bottom-right"
],
"examples": [
"bottom-right"
],
"addedIn": "v1.9.5"
},
"badgeStyle": {
"type": "String",
"desc": "Style definitions to be attributed to the badge",
"examples": [
"background-color: #ff0000"
],
"addedIn": "v1.9.0"
},
"badgeClass": {
"type": "String",
"desc": "Class definitions to be attributed to the badge",
"examples": [
"my-special-class"
],
"addedIn": "v1.9.0"
},
"progress": {
"type": "Boolean",
"desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)",
"addedIn": "v1.9.0"
},
"progressClass": {
"type": "String",
"desc": "Class definitions to be attributed to the progress bar",
"examples": [
"my-special-class"
],
"addedIn": "v1.9.0"
},
"classes": {
"type": "String",
"desc": "Add CSS class(es) to the notification for easier customization",
"examples": [
"my-notif-class"
]
},
"attrs": {
"type": "Object",
"desc": "Key-value for attributes to be set on the notification",
"examples": [
"{ role: 'alertdialog' }"
],
"addedIn": "v1.13.0"
},
"timeout": {
"type": "Number",
"desc": "Amount of time to display (in milliseconds)",
"default": 5000,
"examples": [
2500
]
},
"closeBtn": {
"type": [
"Boolean",
"String"
],
"desc": "Convenient way to add a dismiss button with a specific label, without using the 'actions' convoluted prop",
"examples": [
"Close me"
]
},
"multiLine": {
"type": "Boolean",
"desc": "Put notification into multi-line mode; If this prop isn't used and more than one 'action' is specified then notification goes into multi-line mode by default"
}
}
},
"methods": {
"create": {
"tsInjectionPoint": true,
"desc": "Creates a notification; Same as calling $q.notify(...)",
"params": {
"opts": {
"type": [
"Object",
"String"
],
"desc": "Notification options",
"definition": {
"type": {
"type": "String",
"desc": "Optional type (that has been previously registered) or one of the out of the box ones ('positive', 'negative', 'warning', 'info', 'ongoing')",
"examples": [
"negative",
"custom-type"
],
"addedIn": "v1.9.0"
},
"color": {
"type": "String",
"desc": "Color name for component from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style"
},
"textColor": {
"type": "String",
"desc": "Color name for component from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style"
},
"message": {
"type": "String",
"desc": "The content of your message",
"examples": [
"John Doe pinged you"
]
},
"caption": {
"type": "String",
"desc": "The content of your optional caption",
"examples": [
"5 minutes ago"
],
"addedIn": "v1.5.5"
},
"html": {
"type": "Boolean",
"desc": "Render message as HTML; This can lead to XSS attacks, so make sure that you sanitize the message first"
},
"icon": {
"type": "String",
"desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix",
"examples": [
"map",
"ion-add",
"img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
"img:statics/path/to/some_image.png"
],
"category": "content"
},
"avatar": {
"type": "String",
"desc": "URL to an avatar/image; Suggestion: use statics folder",
"examples": [
"(statics folder) statics/img/something.png",
"(relative path format) require('./my_img.jpg')",
"(URL) https://some-site.net/some-img.gif"
]
},
"spinner": {
"type": [
"Boolean",
"Component"
],
"desc": "Useful for notifications that are updated; Displays a Quasar spinner instead of an avatar or icon; If value is Boolean 'true' then the default QSpinner is shown",
"addedIn": "v1.14.0"
},
"position": {
"type": "String",
"desc": "Window side/corner to stick to",
"default": "bottom",
"values": [
"top-left",
"top-right",
"bottom-left",
"bottom-right",
"top",
"bottom",
"left",
"right",
"center"
],
"examples": [
"top-right"
]
},
"group": {
"type": [
"Boolean",
"String",
"Number"
],
"desc": "Override the auto generated group with custom one; Grouped notifications cannot be updated; String or number value inform this is part of a specific group, regardless of its options; When a new notification is triggered with same group name, it replaces the old one and shows a badge with how many times the notification was triggered",
"default": "(message + caption + multiline + actions labels + position)",
"examples": [
"my-group"
],
"addedIn": "v1.9.0"
},
"badgeColor": {
"type": "String",
"desc": "Color name for the badge from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style",
"addedIn": "v1.9.0"
},
"badgeTextColor": {
"type": "String",
"desc": "Color name for the badge text from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style",
"addedIn": "v1.9.0"
},
"badgePosition": {
"type": "String",
"desc": "Notification corner to stick badge to; If notification is on the left side then default is top-right otherwise it is top-left",
"default": "(top-left/top-right)",
"values": [
"top-left",
"top-right",
"bottom-left",
"bottom-right"
],
"examples": [
"bottom-right"
],
"addedIn": "v1.9.5"
},
"badgeStyle": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Style definitions to be attributed to the badge",
"examples": [
"background-color: #ff0000",
":content-style=\"{ backgroundColor: '#ff0000' }\""
],
"addedIn": "v1.9.0"
},
"badgeClass": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Class definitions to be attributed to the badge",
"examples": [
"my-special-class",
":content-class=\"{ 'my-special-class': <condition> }\""
],
"addedIn": "v1.9.0"
},
"progress": {
"type": "Boolean",
"desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)",
"addedIn": "v1.9.0"
},
"progressClass": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Class definitions to be attributed to the progress bar",
"examples": [
"my-special-class",
":content-class=\"{ 'my-special-class': <condition> }\""
],
"addedIn": "v1.9.0"
},
"classes": {
"type": "String",
"desc": "Add CSS class(es) to the notification for easier customization",
"examples": [
"my-notif-class"
]
},
"attrs": {
"type": "Object",
"desc": "Key-value for attributes to be set on the notification",
"examples": [
"{ role: 'alertdialog' }"
],
"addedIn": "v1.13.0"
},
"timeout": {
"type": "Number",
"desc": "Amount of time to display (in milliseconds)",
"default": 5000,
"examples": [
2500
]
},
"actions": {
"type": "Array",
"desc": "Notification actions (buttons); If a 'handler' is specified or not, clicking/tapping on the button will also close the notification; Also check 'closeBtn' convenience prop",
"examples": [
"[ { label: 'Show', handler: (Function), attrs: { 'aria-label': 'Button label' } }, { icon: 'map', handler: (Function), color: 'yellow' }, { label: 'Learn more', noDismiss: true, handler: (Function) } ]"
]
},
"onDismiss": {
"type": "Function",
"desc": "Function to call when notification gets dismissed",
"params": null,
"returns": null,
"examples": [
"() => { console.log('Dismissed') }"
]
},
"closeBtn": {
"type": [
"Boolean",
"String"
],
"desc": "Convenience way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label accordding to the current Quasar language",
"examples": [
"Close me"
]
},
"multiLine": {
"type": "Boolean",
"desc": "Put notification into multi-line mode; If this prop isn't used and more than one 'action' is specified then notification goes into multi-line mode by default"
},
"ignoreDefaults": {
"type": "Boolean",
"desc": "Ignore the default configuration (set by setDefaults()) for this instance only",
"addedIn": "v1.1.0"
}
},
"required": true
}
},
"returns": {
"type": "Function",
"desc": "Calling this function with no parameters hides the notification; When called with one Object parameter (the original notification must NOT be grouped), it updates the notification (specified properties are shallow merged with previous ones; note that group and position cannot be changed while updating and so they are ignored)",
"params": {
"props": {
"type": "Object",
"desc": "Notification properties that will be shallow merged to previous ones in order to update the non-grouped notification",
"definition": {
"type": {
"type": "String",
"desc": "Optional type (that has been previously registered) or one of the out of the box ones ('positive', 'negative', 'warning', 'info', 'ongoing')",
"examples": [
"negative",
"custom-type"
]
},
"color": {
"type": "String",
"desc": "Color name for component from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style"
},
"textColor": {
"type": "String",
"desc": "Color name for component from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style"
},
"message": {
"type": "String",
"desc": "The content of your message",
"examples": [
"John Doe pinged you"
]
},
"caption": {
"type": "String",
"desc": "The content of your optional caption",
"examples": [
"5 minutes ago"
],
"addedIn": "v1.5.5"
},
"html": {
"type": "Boolean",
"desc": "Render message as HTML; This can lead to XSS attacks, so make sure that you sanitize the message first"
},
"icon": {
"type": "String",
"desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix",
"examples": [
"map",
"ion-add",
"img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
"img:statics/path/to/some_image.png"
],
"category": "content"
},
"avatar": {
"type": "String",
"desc": "URL to an avatar/image; Suggestion: use statics folder",
"examples": [
"(statics folder) statics/img/something.png",
"(relative path format) require('./my_img.jpg')",
"(URL) https://some-site.net/some-img.gif"
]
},
"spinner": {
"type": [
"Boolean",
"Component"
],
"desc": "Useful for notifications that are updated; Displays a Quasar spinner instead of an avatar or icon; If value is Boolean 'true' then the default QSpinner is shown",
"addedIn": "v1.14.0"
},
"progress": {
"type": "Boolean",
"desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)",
"addedIn": "v1.9.0"
},
"progressClass": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Class definitions to be attributed to the progress bar",
"examples": [
"my-special-class",
":content-class=\"{ 'my-special-class': <condition> }\""
],
"addedIn": "v1.9.0"
},
"classes": {
"type": "String",
"desc": "Add CSS class(es) to the notification for easier customization",
"examples": [
"my-notif-class"
]
},
"attrs": {
"type": "Object",
"desc": "Key-value for attributes to be set on the notification",
"examples": [
"{ role: 'alertdialog' }"
],
"addedIn": "v1.13.0"
},
"timeout": {
"type": "Number",
"desc": "Amount of time to display (in milliseconds)",
"default": 5000,
"examples": [
2500
]
},
"actions": {
"type": "Array",
"desc": "Notification actions (buttons); If a 'handler' is specified or not, clicking/tapping on the button will also close the notification; Also check 'closeBtn' convenience prop",
"examples": [
"[ { label: 'Show', handler: (Function), attrs: { 'aria-label': 'Button label' } }, { icon: 'map', handler: (Function), color: 'yellow' }, { label: 'Learn more', noDismiss: true, handler: (Function) } ]"
]
},
"onDismiss": {
"type": "Function",
"desc": "Function to call when notification gets dismissed",
"params": null,
"returns": null,
"examples": [
"() => { console.log('Dismissed') }"
]
},
"closeBtn": {
"type": [
"Boolean",
"String"
],
"desc": "Convenience way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label accordding to the current Quasar language",
"examples": [
"Close me"
]
},
"multiLine": {
"type": "Boolean",
"desc": "Put notification into multi-line mode; If this prop isn't used and more than one 'action' is specified then notification goes into multi-line mode by default"
},
"ignoreDefaults": {
"type": "Boolean",
"desc": "Ignore the default configuration (set by setDefaults()) for this instance only",
"addedIn": "v1.1.0"
}
},
"addedIn": "v1.14.0"
}
},
"returns": null
}
},
"setDefaults": {
"desc": "Merge options into the default ones",
"params": {
"opts": {
"type": "Object",
"desc": "Notification options",
"definition": {
"type": {
"type": "String",
"desc": "Optional type (that has been previously registered) or one of the out of the box ones ('positive', 'negative', 'warning', 'info', 'ongoing')",
"examples": [
"negative",
"custom-type"
],
"addedIn": "v1.9.0"
},
"color": {
"type": "String",
"desc": "Color name for component from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style"
},
"textColor": {
"type": "String",
"desc": "Color name for component from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style"
},
"message": {
"type": "String",
"desc": "The content of your message",
"examples": [
"John Doe pinged you"
]
},
"caption": {
"type": "String",
"desc": "The content of your optional caption",
"examples": [
"5 minutes ago"
],
"addedIn": "v1.5.5"
},
"html": {
"type": "Boolean",
"desc": "Render message as HTML; This can lead to XSS attacks, so make sure that you sanitize the message first"
},
"icon": {
"type": "String",
"desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix",
"examples": [
"map",
"ion-add",
"img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
"img:statics/path/to/some_image.png"
],
"category": "content"
},
"avatar": {
"type": "String",
"desc": "URL to an avatar/image; Suggestion: use statics folder",
"examples": [
"(statics folder) statics/img/something.png",
"(relative path format) require('./my_img.jpg')",
"(URL) https://some-site.net/some-img.gif"
]
},
"spinner": {
"type": [
"Boolean",
"Component"
],
"desc": "Useful for notifications that are updated; Displays a Quasar spinner instead of an avatar or icon; If value is Boolean 'true' then the default QSpinner is shown",
"addedIn": "v1.14.0"
},
"position": {
"type": "String",
"desc": "Window side/corner to stick to",
"default": "bottom",
"values": [
"top-left",
"top-right",
"bottom-left",
"bottom-right",
"top",
"bottom",
"left",
"right",
"center"
],
"examples": [
"top-right"
]
},
"badgeColor": {
"type": "String",
"desc": "Color name for the badge from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style",
"addedIn": "v1.9.0"
},
"badgeTextColor": {
"type": "String",
"desc": "Color name for the badge text from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style",
"addedIn": "v1.9.0"
},
"badgePosition": {
"type": "String",
"desc": "Notification corner to stick badge to; If notification is on the left side then default is top-right otherwise it is top-left",
"default": "(top-left/top-right)",
"values": [
"top-left",
"top-right",
"bottom-left",
"bottom-right"
],
"examples": [
"bottom-right"
],
"addedIn": "v1.9.5"
},
"badgeStyle": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Style definitions to be attributed to the badge",
"examples": [
"background-color: #ff0000",
":content-style=\"{ backgroundColor: '#ff0000' }\""
],
"addedIn": "v1.9.0"
},
"badgeClass": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Class definitions to be attributed to the badge",
"examples": [
"my-special-class",
":content-class=\"{ 'my-special-class': <condition> }\""
],
"addedIn": "v1.9.0"
},
"progress": {
"type": "Boolean",
"desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)",
"addedIn": "v1.9.0"
},
"progressClass": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Class definitions to be attributed to the progress bar",
"examples": [
"my-special-class",
":content-class=\"{ 'my-special-class': <condition> }\""
],
"addedIn": "v1.9.0"
},
"classes": {
"type": "String",
"desc": "Add CSS class(es) to the notification for easier customization",
"examples": [
"my-notif-class"
]
},
"attrs": {
"type": "Object",
"desc": "Key-value for attributes to be set on the notification",
"examples": [
"{ role: 'alertdialog' }"
],
"addedIn": "v1.13.0"
},
"timeout": {
"type": "Number",
"desc": "Amount of time to display (in milliseconds)",
"default": 5000,
"examples": [
2500
]
},
"actions": {
"type": "Array",
"desc": "Notification actions (buttons); If a 'handler' is specified or not, clicking/tapping on the button will also close the notification; Also check 'closeBtn' convenience prop",
"examples": [
"[ { label: 'Show', handler: (Function), attrs: { 'aria-label': 'Button label' } }, { icon: 'map', handler: (Function), color: 'yellow' } ]"
]
},
"onDismiss": {
"type": "Function",
"desc": "Function to call when notification gets dismissed",
"params": null,
"returns": null,
"examples": [
"() => { console.log('Dismissed') }"
]
},
"closeBtn": {
"type": [
"Boolean",
"String"
],
"desc": "Convenience way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label accordding to the current Quasar language",
"examples": [
"Close me"
]
},
"multiLine": {
"type": "Boolean",
"desc": "Put notification into multi-line mode; If this prop isn't used and more than one 'action' is specified then notification goes into multi-line mode by default"
}
},
"required": true
}
}
},
"registerType": {
"addedIn": "v1.9.0",
"desc": "Register a new type of notification (or override an existing one)",
"params": {
"typeName": {
"type": "String",
"desc": "Name of the type (to be used as 'type' prop later on)",
"required": true,
"examples": [
"my-type"
]
},
"typeOpts": {
"type": "Object",
"desc": "Notification options",
"definition": {
"type": {
"type": "String",
"desc": "Optional type (that has been previously registered) or one of the out of the box ones ('positive', 'negative', 'warning', 'info', 'ongoing')",
"examples": [
"negative",
"custom-type"
],
"addedIn": "v1.9.0"
},
"color": {
"type": "String",
"desc": "Color name for component from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style"
},
"textColor": {
"type": "String",
"desc": "Color name for component from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style"
},
"message": {
"type": "String",
"desc": "The content of your message",
"examples": [
"John Doe pinged you"
]
},
"caption": {
"type": "String",
"desc": "The content of your optional caption",
"examples": [
"5 minutes ago"
],
"addedIn": "v1.5.5"
},
"html": {
"type": "Boolean",
"desc": "Render message as HTML; This can lead to XSS attacks, so make sure that you sanitize the message first"
},
"icon": {
"type": "String",
"desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix",
"examples": [
"map",
"ion-add",
"img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
"img:statics/path/to/some_image.png"
],
"category": "content"
},
"avatar": {
"type": "String",
"desc": "URL to an avatar/image; Suggestion: use statics folder",
"examples": [
"(statics folder) statics/img/something.png",
"(relative path format) require('./my_img.jpg')",
"(URL) https://some-site.net/some-img.gif"
]
},
"spinner": {
"type": [
"Boolean",
"Component"
],
"desc": "Useful for notifications that are updated; Displays a Quasar spinner instead of an avatar or icon; If value is Boolean 'true' then the default QSpinner is shown",
"addedIn": "v1.14.0"
},
"position": {
"type": "String",
"desc": "Window side/corner to stick to",
"default": "bottom",
"values": [
"top-left",
"top-right",
"bottom-left",
"bottom-right",
"top",
"bottom",
"left",
"right",
"center"
],
"examples": [
"top-right"
]
},
"badgeColor": {
"type": "String",
"desc": "Color name for the badge from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style",
"addedIn": "v1.9.0"
},
"badgeTextColor": {
"type": "String",
"desc": "Color name for the badge text from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style",
"addedIn": "v1.9.0"
},
"badgePosition": {
"type": "String",
"desc": "Notification corner to stick badge to; If notification is on the left side then default is top-right otherwise it is top-left",
"default": "(top-left/top-right)",
"values": [
"top-left",
"top-right",
"bottom-left",
"bottom-right"
],
"examples": [
"bottom-right"
],
"addedIn": "v1.9.5"
},
"badgeStyle": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Style definitions to be attributed to the badge",
"examples": [
"background-color: #ff0000",
":content-style=\"{ backgroundColor: '#ff0000' }\""
],
"addedIn": "v1.9.0"
},
"badgeClass": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Class definitions to be attributed to the badge",
"examples": [
"my-special-class",
":content-class=\"{ 'my-special-class': <condition> }\""
],
"addedIn": "v1.9.0"
},
"progress": {
"type": "Boolean",
"desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)",
"addedIn": "v1.9.0"
},
"progressClass": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Class definitions to be attributed to the progress bar",
"examples": [
"my-special-class",
":content-class=\"{ 'my-special-class': <condition> }\""
],
"addedIn": "v1.9.0"
},
"classes": {
"type": "String",
"desc": "Add CSS class(es) to the notification for easier customization",
"examples": [
"my-notif-class"
]
},
"attrs": {
"type": "Object",
"desc": "Key-value for attributes to be set on the notification",
"examples": [
"{ role: 'alertdialog' }"
],
"addedIn": "v1.13.0"
},
"timeout": {
"type": "Number",
"desc": "Amount of time to display (in milliseconds)",
"default": 5000,
"examples": [
2500
]
},
"actions": {
"type": "Array",
"desc": "Notification actions (buttons); If a 'handler' is specified or not, clicking/tapping on the button will also close the notification; Also check 'closeBtn' convenience prop",
"examples": [
"[ { label: 'Show', handler: (Function), attrs: { 'aria-label': 'Button label' } }, { icon: 'map', handler: (Function), color: 'yellow' } ]"
]
},
"onDismiss": {
"type": "Function",
"desc": "Function to call when notification gets dismissed",
"params": null,
"returns": null,
"examples": [
"() => { console.log('Dismissed') }"
]
},
"closeBtn": {
"type": [
"Boolean",
"String"
],
"desc": "Convenience way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label accordding to the current Quasar language",
"examples": [
"Close me"
]
},
"multiLine": {
"type": "Boolean",
"desc": "Put notification into multi-line mode; If this prop isn't used and more than one 'action' is specified then notification goes into multi-line mode by default"
}
},
"required": true
}
}
}
}
}