Blazor Notification Overview
This article provides information about the Blazor Notification component and its main features.
The Notification component renders a brief message to the user which holds information regarding the status of a process in the application. Using its settings you can customize its position, animation options and rendering.
The Notification component is part of Telerik UI for Blazor, a
professional grade UI library with 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor Notification
- Add the
<TelerikNotification>
tag to your razor page. - Obtain the component reference via
@ref
. - Setup an instance of the
NotificationModel
class (provided by the Telerik Blazor package), and pass it to theShow()
method of the component instance.
@* This shows a simple text message that hides automatically *@
<TelerikButton OnClick="@AddNotification">Add a basic notification</TelerikButton>
<TelerikNotification @ref="@NotificationReference" Class="MyTelerikNotification"></TelerikNotification>
@code {
public TelerikNotification NotificationReference { get; set; }
public void AddNotification()
{
NotificationReference.Show(new NotificationModel()
{
Text = "Auto Closable Notification",
ThemeColor = ThemeConstants.Notification.ThemeColor.Primary
});
}
}
<style>
.MyTelerikNotification .k-notification-container .k-notification-wrap {
width: 300px;
height: 50px;
font-size: 1.5em;
text-align: center;
align-items: center;
}
</style>
Simple Notification
Show Method
The Show()
method is accessible through the component's reference. This method allows you to add the Notification to the page.
You can find more information on opening, closing and hiding the Notification in the Open, Close and Hide article.
Get a reference to the Notification and use the Show method
@* The fully qualified class name of the notification component so you can use its reference *@
<TelerikButton OnClick="@AutoCloseNotification">Add auto close notification</TelerikButton>
<TelerikNotification @ref="@NotificationReference"></TelerikNotification>
@code {
Telerik.Blazor.Components.TelerikNotification NotificationReference { get; set; }
void AutoCloseNotification()
{
NotificationReference.Show(new NotificationModel()
{
Text = "Auto Closable Notification",
ThemeColor = "primary",
Closable = false
});
}
}
Stacked Notifications
Multiple Notifications can stack if they derive from different references. Read the Stacked Notifications article for more information...
Styling and Appearance
You can customize the styling and the appearance of the Notification. For example, select the animation type or choose a suitable background color.
Notification Parameters
Parameter | Type and Default value | Description |
---|---|---|
Class |
string |
The CSS class that will be rendered on the main wrapping element of the Notification component - <div class="k-notification-container"> . You could use that class to to control things like the size or the z-index of the component. You can find more infomation and examples in the Appearance article. |
OnChange |
EventCallback<bool> |
This event indicates whether the media query string provided to the Media parameter matches the current browser size. It fires when it matches, and when it stops matching. See the Events article for more information. |
AnimationType |
AnimationType enum Fade
|
Allows you to customize the animation of the Notifications. You can find more infomation and examples in the Appearance article. |
AnimationDuration |
int 300
|
Defines the duration of the animation in milliseconds. |
VerticalPosition |
NotificationVerticalPosition enum Bottom
|
Defines the vertical position of the Notification. |
HorizontalPosition |
NotificationHorizontalPosition enum Right
|
Defines the horizontal position of the Notification. |
NotificationModel Class Properties
The NotificationModel
class is used to add new notifications to the page. You can use it to set settings for each individual message you want to show. The class contains the following properties:
Property | Type and Default value | Description |
---|---|---|
ThemeColor |
string |
The color of the notification is controlled through this parameter. You can find more infomation and examples in the Appearance article. |
Closable |
bool true
|
If set to true a close button will appear which will enable the user to close the Notificaion. If you want the Notification to not close automatically you should set the Closable paramter to true and the CloseAfter to 0 . |
CloseAfter |
int 5000
|
Allows you to configure after how much time the Notification component will close automatically. Set it to 0 to prevent it from closing automatically. |
ShowIcon |
bool true
|
Allows you to specify whether an icon should appear in the component. |
Icon |
string |
Specifies the icon that will render in the component if the ShowIcon parameter is set to true . You can find more information on adding an icon to a Telerik Component in Telerik Font Icons article. |
Text |
string |
the text that will be rendered in the Notification component. |