From 45fa87289a0d8348f3e54d7af1ab93402e233db9 Mon Sep 17 00:00:00 2001 From: Ilkay Ilknur Date: Tue, 17 Nov 2020 14:52:18 +0300 Subject: [PATCH] blazor notification service documentation added. --- docs/en/UI/Blazor/Notification.md | 79 +++++++++++++++++- .../en/images/blazor-notification-success.png | Bin 0 -> 3028 bytes 2 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 docs/en/images/blazor-notification-success.png diff --git a/docs/en/UI/Blazor/Notification.md b/docs/en/UI/Blazor/Notification.md index 09f4eb93bb..2dc22b3274 100644 --- a/docs/en/UI/Blazor/Notification.md +++ b/docs/en/UI/Blazor/Notification.md @@ -1,3 +1,78 @@ -# Blazor UI: Notification Service +# Blazor: UI Notification Service -`IUiNotificationService` is used to show toastr style notifications on the user interface. The documentation is in progress... \ No newline at end of file +`IUiNotificationService` is used to show toastr 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. + +```csharp +namespace MyProject.Blazor.Pages +{ + public partial class Index + { + public IUiNotificationService UiNotificationService { get; } + + public Index(IUiNotificationService uiNotificationService) + { + UiNotificationService = uiNotificationService; + } + + public async Task DeleteAsync() + { + //Delete entity + await UiNotificationService.Success("The product 'Acme Atom Re-Arranger' has been successfully deleted."); + } + } +} +``` + +![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`. + +```csharp +namespace MyProject.Blazor.Pages +{ + public partial class Index : AbpComponentBase + { + public async Task DeleteAsync() + { + //Delete entity + await Notify.Success("The product 'Acme Atom Re-Arranger' has been successfully deleted."); + } + } +} +``` + +## Notification Types + +There are four types of pre-defined notifications; + +* `Info(...)` +* `Success(...)` +* `Warn(...)` +* `Error(...)` + +All of the methods above gets the following parameters; + +* `message`: The message (`string`) to be shown. +* `title`: An optional (`string`) title. +* `options`: An optional (`Action`) to configure notification options. + +## Notification Configuration + +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. + +```csharp +await UiNotificationService.Success("The product 'Acme Atom Re-Arranger' has been successfully deleted.", options: (options) => + { + options.OkButtonIcon = "custom-icon"; + options.OkButtonText = L["CustomOK"]; + }); +``` + +List of the options that you can change by providing the `action` parameter. + +* `OkButtonText` : Custom text for the Ok button. +* `OkButtonIcon` : Custom icon for the Ok button \ No newline at end of file diff --git a/docs/en/images/blazor-notification-success.png b/docs/en/images/blazor-notification-success.png new file mode 100644 index 0000000000000000000000000000000000000000..d68dcf47d867df9865bd2cf8f23ef2c853e35e29 GIT binary patch literal 3028 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 J0ejN^_79P6K34z$ literal 0 HcmV?d00001