blazor notification service documentation added.

pull/6238/head
Ilkay Ilknur 5 years ago
parent 683778ba54
commit 45fa87289a

@ -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.");
}
}
}
```
![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

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Loading…
Cancel
Save