UNPKG

quasar

Version:

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

493 lines (439 loc) 17.9 kB
{ "meta": { "docsUrl": "https://v2.quasar.dev/quasar-plugins/notify" }, "injection": "$q.notify", "quasarConfOptions": { "propName": "notify", "type": "Object", "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": { "extends": "color" }, "textColor": { "extends": "text-color" }, "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'" ] }, "html": { "type": "Boolean", "desc": "Render the message as HTML; This can lead to XSS attacks, so make sure that you sanitize the message first" }, "icon": { "extends": "icon" }, "iconColor": { "extends": "color", "addedIn": "v2.5.5" }, "iconSize": { "extends": "size", "addedIn": "v2.5.5" }, "avatar": { "type": "String", "desc": "URL to an avatar/image; Suggestion: use public folder", "examples": [ "# (public folder) 'img/something.png'", "# (relative path format) require('./my_img.jpg')", "# (URL) https://some-site.net/some-img.gif" ] }, "spinner": { "type": [ "Boolean", "Component" ], "configFileType": [ "Boolean", "String" ], "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", "examples": [ "true", "QSpinnerBars" ] }, "spinnerColor": { "extends": "color", "addedIn": "v2.5.5" }, "spinnerSize": { "extends": "size", "addedIn": "v2.5.5" }, "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'" ] }, "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'" ] }, "badgeColor": { "extends": "color", "desc": "Color name for the badge from the Quasar Color Palette" }, "badgeTextColor": { "extends": "color", "desc": "Color name for the badge text from the Quasar Color Palette" }, "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'" ] }, "badgeStyle": { "type": [ "String", "Array", "Object" ], "tsType": "VueStyleProp", "desc": "Style definitions to be attributed to the badge", "examples": [ "'background-color: #ff0000'", "{ backgroundColor: '#ff0000' }" ] }, "badgeClass": { "type": [ "String", "Array", "Object" ], "tsType": "VueClassProp", "desc": "Class definitions to be attributed to the badge", "examples": [ "'my-special-class'", "{ 'my-special-class': true }" ] }, "progress": { "type": "Boolean", "desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)" }, "progressClass": { "type": [ "String", "Array", "Object" ], "tsType": "VueClassProp", "desc": "Class definitions to be attributed to the progress bar", "examples": [ "'my-special-class'", "{ 'my-special-class': true }" ] }, "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' }" ], "__exemption": [ "definition" ] }, "timeout": { "type": "Number", "desc": "Amount of time to display (in milliseconds). Set to 0 to never dismiss automatically.", "default": "5000" }, "actions": { "type": "Array", "tsType": "QNotifyAction", "desc": "Notification actions (buttons); Unless 'noDismiss' is true, clicking/tapping on the button will close the notification; Also check 'closeBtn' convenience prop", "definition": { "handler": { "type": "Function", "configFileType": null, "desc": "Function to be executed when the button is clicked/tapped", "params": null, "returns": null, "examples": [ "() => { console.log('button clicked') }" ] }, "noDismiss": { "type": "Boolean", "desc": "Do not dismiss the notification when the button is clicked/tapped" }, "...": { "type": "Any", "desc": "Any other QBtn prop expect 'onClick' (use 'handler' instead, only possible with UI config)", "examples": [ "label: 'Learn more'", "color: 'primary'" ] } }, "examples": [ "[ { label: 'Show', handler: () => {}, 'aria-label': 'Button label' }, { icon: 'map', handler: () => {}, color: 'yellow' }, { label: 'Learn more', noDismiss: true, handler: () => {} } ]" ] }, "onDismiss": { "type": "Function", "configFileType": null, "desc": "Function to call when notification gets dismissed", "params": null, "returns": null, "examples": [ "() => { console.log('Dismissed') }" ] }, "closeBtn": { "type": [ "Boolean", "String" ], "desc": "Convenient way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label according 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" } } }, "methods": { "create": { "tsInjectionPoint": true, "desc": "Creates a notification; Same as calling $q.notify(...)", "params": { "opts": { "type": [ "Object", "String" ], "tsType": "QNotifyCreateOptions", "autoDefineTsType": true, "required": true, "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'" ] }, "color": { "extends": "color" }, "textColor": { "extends": "text-color" }, "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'" ] }, "html": { "type": "Boolean", "desc": "Render the message as HTML; This can lead to XSS attacks, so make sure that you sanitize the message first" }, "icon": { "extends": "icon" }, "iconColor": { "extends": "color", "addedIn": "v2.5.5" }, "iconSize": { "extends": "size", "addedIn": "v2.5.5" }, "avatar": { "type": "String", "desc": "URL to an avatar/image; Suggestion: use public folder", "examples": [ "# (public folder) '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", "examples": [ "true", "QSpinnerBars" ] }, "spinnerColor": { "extends": "color", "addedIn": "v2.5.5" }, "spinnerSize": { "extends": "size", "addedIn": "v2.5.5" }, "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'" ] }, "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'" ] }, "badgeColor": { "extends": "color", "desc": "Color name for the badge from the Quasar Color Palette" }, "badgeTextColor": { "extends": "color", "desc": "Color name for the badge text from the Quasar Color Palette" }, "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'" ] }, "badgeStyle": { "type": [ "String", "Array", "Object" ], "tsType": "VueStyleProp", "desc": "Style definitions to be attributed to the badge", "examples": [ "'background-color: #ff0000'", "{ backgroundColor: '#ff0000' }" ] }, "badgeClass": { "type": [ "String", "Array", "Object" ], "tsType": "VueClassProp", "desc": "Class definitions to be attributed to the badge", "examples": [ "'my-special-class'", "{ 'my-special-class': true }" ] }, "progress": { "type": "Boolean", "desc": "Show progress bar to detail when notification will disappear automatically (unless timeout is 0)" }, "progressClass": { "type": [ "String", "Array", "Object" ], "tsType": "VueClassProp", "desc": "Class definitions to be attributed to the progress bar", "examples": [ "'my-special-class'", "{ 'my-special-class': true }" ] }, "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' }" ], "__exemption": [ "definition" ] }, "timeout": { "type": "Number", "desc": "Amount of time to display (in milliseconds). Set to 0 to never dismiss automatically.", "default": "5000", "examples": [ "2500" ] }, "actions": { "type": "Array", "tsType": "QNotifyAction", "desc": "Notification actions (buttons); Unless 'noDismiss' is true, clicking/tapping on the button will close the notification; Also check 'closeBtn' convenience prop", "definition": { "handler": { "type": "Function", "desc": "Function to be executed when the button is clicked/tapped", "params": null, "returns": null, "examples": [ "() => { console.log('button clicked') }" ] }, "noDismiss": { "type": "Boolean", "desc": "Do not dismiss the notification when the button is clicked/tapped" }, "...": { "type": "Any", "desc": "Any other QBtn prop expect 'onClick' (use 'handler' instead)", "examples": [ "label: 'Learn more'", "color: 'primary'" ] } }, "examples": [ "[ { label: 'Show', handler: () => {}, 'aria-label': 'Button label' }, { icon: 'map', handler: () => {}, color: 'yellow' }, { label: 'Learn more', noDismiss: true, handler: () => {} } ]" ] }, "onDismiss": { "type": "Function", "desc": "Function to call when notification gets dismissed", "params": null, "returns": null, "examples": [ "() => { console.log('Dismissed') }" ] }, "closeBtn": { "type": [ "Boolean", "String" ], "desc": "Convenient way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label according 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" } } } }, "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", "tsType": "QNotifyUpdateOptions", "required": false, "desc": "Notification properties that will be shallow merged to previous ones in order to update the non-grouped notification; (See 'opts' param of 'create()' for object properties, except 'group' and 'position')", "__exemption": [ "definition" ] } }, "returns": null } }, "setDefaults": { "desc": "Merge options into the default ones", "params": { "opts": { "type": "Object", "tsType": "QNotifyOptions", "required": true, "desc": "Notification options except 'ignoreDefaults' (See 'opts' param of 'create()' for object properties)", "__exemption": [ "definition" ] } }, "returns": null }, "registerType": { "desc": "Register a new type of notification (or override an existing one)", "params": { "typeName": { "type": "String", "required": true, "desc": "Name of the type (to be used as 'type' prop later on)", "examples": [ "'my-type'" ] }, "typeOpts": { "type": "Object", "tsType": "QNotifyOptions", "required": true, "desc": "Notification options except 'ignoreDefaults' (See 'opts' param of 'create()' for object properties)", "__exemption": [ "definition" ] } }, "returns": null } } }