You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.1 KiB
94 lines
2.1 KiB
= Create custom notifications
|
|
:navtitle: Notifications
|
|
:description_short: Learn how to make custom notifications.
|
|
:description: Learn how to make custom dialogs with NotificationManager.
|
|
:keywords: custom, notification, notifications, notificationmanager
|
|
|
|
{productname} can display customized notifications.
|
|
|
|
== Interactive example
|
|
|
|
liveDemo::notifications[]
|
|
|
|
== Text
|
|
|
|
The *text* property sets the text that is displayed at the center of the notification. This is the most important setting when opening a notification.
|
|
|
|
[source,js]
|
|
----
|
|
editor.notificationManager.open({
|
|
text: 'A test informational notification.'
|
|
});
|
|
----
|
|
|
|
== Type
|
|
|
|
The following notification types differ in color and purpose:
|
|
|
|
* success
|
|
* info
|
|
* warning
|
|
* error
|
|
|
|
Set the `+type+` property when opening the notification. The default style is used if this property is not set.
|
|
|
|
[source,js]
|
|
----
|
|
editor.notificationManager.open({
|
|
text: 'A test informational notification.',
|
|
type: 'info'
|
|
});
|
|
----
|
|
|
|
== Timeout
|
|
|
|
The notification automatically closes after the value set in the `+timeout+` property elapses in milliseconds.
|
|
|
|
[source,js]
|
|
----
|
|
editor.notificationManager.open({
|
|
text: 'A test notification that will close automatically after 5 seconds.',
|
|
timeout: 5000
|
|
});
|
|
----
|
|
|
|
== Icon
|
|
|
|
Set the `+icon+` property to display an icon to the left of the text.
|
|
|
|
[source,js]
|
|
----
|
|
editor.notificationManager.open({
|
|
text: 'A test notification that contains a bold icon.',
|
|
icon: 'bold'
|
|
});
|
|
----
|
|
|
|
For a list of the icon identifiers, see: xref:editor-icon-identifiers.adoc[Available icons].
|
|
|
|
== Progress Bar
|
|
|
|
Set the `+progressBar+` property type to `+True+` to display a progress bar to the left of the close button and to the right of the text.
|
|
|
|
[source,js]
|
|
----
|
|
const notification = editor.notificationManager.open({
|
|
text: 'A test notification that contains a progress bar.',
|
|
progressBar: true
|
|
});
|
|
----
|
|
|
|
Set the `+progressBar+` property between 0 and 100 to set the progress of the progress bar.
|
|
|
|
[source,js]
|
|
----
|
|
notification.progressBar.value(50);
|
|
----
|
|
|
|
To close the last shown notification, `+call+` the following method:
|
|
|
|
[source,js]
|
|
----
|
|
// Close the last shown notification.
|
|
editor.notificationManager.close();
|
|
----
|