diff --git a/docs/en/UI/Blazor/Notification.md b/docs/en/UI/Blazor/Notification.md index 2dc22b3274..24b589b75c 100644 --- a/docs/en/UI/Blazor/Notification.md +++ b/docs/en/UI/Blazor/Notification.md @@ -1,27 +1,28 @@ -# Blazor: UI Notification Service +# Blazor UI: Notification Service -`IUiNotificationService` is used to show toastr style notifications on the user interface. +`IUiNotificationService` is used to show toast style notifications on the user interface. ## Quick Example -Simply inject `IUiNotificationService` to your page or component and call the `Success` method to show a success message. +Simply [inject](../../Dependency-Injection.md) `IUiNotificationService` to your page or component and call the `Success` method to show a success message. ```csharp namespace MyProject.Blazor.Pages { public partial class Index { - public IUiNotificationService UiNotificationService { get; } + private readonly IUiNotificationService _uiNotificationService; public Index(IUiNotificationService uiNotificationService) { - UiNotificationService = uiNotificationService; + _uiNotificationService = uiNotificationService; } public async Task DeleteAsync() { - //Delete entity - await UiNotificationService.Success("The product 'Acme Atom Re-Arranger' has been successfully deleted."); + await _uiNotificationService.Success( + "The product 'Acme Atom Re-Arranger' has been successfully deleted." + ); } } } @@ -29,7 +30,7 @@ namespace MyProject.Blazor.Pages ![blazor-notification-sucess](../../images/blazor-notification-success.png) -If you inherit your page or component from `AbpComponentBase` class, you can use the `Notify` property to access the `IUiNotificationService`. +If you inherit your page or component from the `AbpComponentBase` class, you can use the the `Notify` property to access the `IUiNotificationService` as a pre-injected property. ```csharp namespace MyProject.Blazor.Pages @@ -38,13 +39,16 @@ namespace MyProject.Blazor.Pages { public async Task DeleteAsync() { - //Delete entity - await Notify.Success("The product 'Acme Atom Re-Arranger' has been successfully deleted."); + await Notify.Success( + "The product 'Acme Atom Re-Arranger' has been successfully deleted." + ); } } } ``` +> You typically use `@inherits AbpComponentBase` in the `.razor` file to inherit from the `AbpComponentBase`, instead of inheriting in the code behind file. + ## Notification Types There are four types of pre-defined notifications; @@ -60,19 +64,40 @@ All of the methods above gets the following parameters; * `title`: An optional (`string`) title. * `options`: An optional (`Action`) to configure notification options. -## Notification Configuration +## Configuration + +### Per Notification -It is easy to change default notification options if you like to customize notifications. Provide an `action` to the `options` parameter and change the default values. +It is easy to change default notification options if you like to customize it per notification. Provide an action to the `options` parameter as shown below: ```csharp -await UiNotificationService.Success("The product 'Acme Atom Re-Arranger' has been successfully deleted.", options: (options) => +await UiNotificationService.Success( + "The product 'Acme Atom Re-Arranger' has been successfully deleted.", + options: (options) => { - options.OkButtonIcon = "custom-icon"; - options.OkButtonText = L["CustomOK"]; + options.OkButtonText = + LocalizableString.Create("CustomOK"); }); ``` -List of the options that you can change by providing the `action` parameter. +### Available Options + +Here, the list of all available options; + +* `OkButtonText` : Custom text for the OK button. +* `OkButtonIcon` : Custom icon for the OK button + +### Global Configuration + +You can also configure global notification options to control the it in a single point. Configure the `UiNotificationOptions` [options class](../../Options.md) in the `ConfigureServices` of your [module](../../Module-Development-Basics.md): + +````csharp +Configure(options => +{ + options.OkButtonText = LocalizableString.Create("CustomOK"); +}); +```` + +The same options are available here. -* `OkButtonText` : Custom text for the Ok button. -* `OkButtonIcon` : Custom icon for the Ok button \ No newline at end of file +> *Per notification* configuration overrides the default values. \ No newline at end of file