diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Index.md b/docs/en/UI/AspNetCore/JavaScript-API/Index.md index 6b244db1ff..d37f8c907f 100644 --- a/docs/en/UI/AspNetCore/JavaScript-API/Index.md +++ b/docs/en/UI/AspNetCore/JavaScript-API/Index.md @@ -14,7 +14,7 @@ ABP provides a set of JavaScript APIs for ASP.NET Core MVC / Razor Pages applica * abp.log * [abp.message](Message.md) * abp.ModalManager -* abp.notify +* [abp.notify](Notify.md) * abp.security * abp.setting * abp.ui diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Notify.md b/docs/en/UI/AspNetCore/JavaScript-API/Notify.md new file mode 100644 index 0000000000..ba2b0d3de5 --- /dev/null +++ b/docs/en/UI/AspNetCore/JavaScript-API/Notify.md @@ -0,0 +1,45 @@ +# ASP.NET Core MVC / Razor Pages UI: JavaScript Notify API + +Notify API is used to show toast style, auto disappearing UI notifications to the end user. It is implemented by the [Toastr](https://github.com/CodeSeven/toastr) library by default. + +## Quick Example + +Use `abp.notify.success(...)` function to show a success message: + +````js +abp.notify.success( + 'The product "Acme Atom Re-Arranger" has been successfully deleted.', + 'Deleted the Product' +); +```` + +A notification message is shown at the bottom right of the page: + +![js-message-success](D:/Github/abp/docs/en/images/js-notify-success.png) + +## Notification Types + +There are four types of pre-defined notifications; + +* `abp.notify.success(...)` +* `abp.notify.info(...)` +* `abp.notify.warn(...)` +* `abp.notify.error(...)` + +All of the methods above gets the following parameters; + +* `message`: A message (`string`) to show to the user. +* `title`: An optional title (`string`). +* `options`: Additional options to be passed to the underlying library, to the Toastr by default. + +## Toastr Configuration + +The notification API is implemented by the [Toastr](https://github.com/CodeSeven/toastr) library by default. You can see its own configuration options. + +**Example: Show toast messages on the top right of the page** + +````js +toastr.options.positionClass = 'toast-top-right'; +```` + +> ABP sets this option to `toast-bottom-right` by default. You can override it just as shown above. \ No newline at end of file diff --git a/docs/en/images/js-notify-success.png b/docs/en/images/js-notify-success.png new file mode 100644 index 0000000000..04489bc7ce Binary files /dev/null and b/docs/en/images/js-notify-success.png differ