mirror of https://github.com/abpframework/abp.git
2 changed files with 77 additions and 2 deletions
@ -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... |
`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."); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
 |
||||
|
|
||||
|
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 |
||||
|
After Width: | Height: | Size: 3.0 KiB |
Loading…
Reference in new issue