New to Telerik UI for Blazor? Download free 30-day trial

Appearance Settings

The Notification component provides parameters and properties that allows you to customize its appearance. For brevity, this article will be divided in the following sections:

You can use all three together to get the desired appearance. This article will explain their effect one by one.

AnimationType

The AnimationType parameter controls the way the Notification will appear on the screen. It takes a member of the Telerik.Blazor.AnimationType enum:

  • Fade - the default animation
  • None
  • PushUp
  • PushDown
  • PushLeft
  • PushRight
  • RevealVertical
  • SlideIn
  • SlideDown
  • SlideLeft
  • SlideRight
  • ZoomIn
  • ZoomOut

You can see them in action in the Notification Animation Live Demo.

Set an animation for the Notification component

notification animation types gif

@* This sample uses the ZoomOut animation, you can change it *@

<TelerikButton OnClick="@AddNotification">Add a basic notification</TelerikButton>

<TelerikNotification @ref="@NotificationReference" AnimationType="@AnimationType.ZoomOut"></TelerikNotification>

@code {
    public TelerikNotification NotificationReference { get; set; }

    public void AddNotification()
    {
        NotificationReference.Show(new NotificationModel()
        {
            Text = "Auto Closable Notification",
            ThemeColor = "primary"
        });
    }
} 

Size

You can control the Size of the Notification by using CSS. To make the cascading of the styles easier and target a single instance of the component you should use the Class parameter exposed in the the <TelerikNotification> tag.

Control the size of the Notiication component

resized notification

@* Use CSS to set the size of the notification *@

<style>
    .MyTelerikNotification .k-notification-container .k-notification-wrap {
        width: 300px;
        height: 200px;
    }
</style>

<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 = "primary",
            Closable = true,
            CloseAfter = 0
        });
    }
}

ThemeColor

The color of the notification popup is easily controlled through the ThemeColor parameter. You can set it to a member of the Telerik.Blazor.ThemeColor class:

  • Primary
  • Secondary
  • Tertiary
  • Success
  • Info
  • Warning
  • Error
  • Dark
  • Light
  • Inverse

These predefined options match the main Telerik Theme and you can see that in action in the Notification Appearance Live Demo.

Built-in Theme Colors

Notification Theme Colors

@* This sample adds a notification with each built-in theme color *@

<TelerikButton OnClick="@AddColoredNotifications">Add colored notifications</TelerikButton>

<TelerikNotification @ref="@NotificationReference" AnimationType="@AnimationType.ZoomOut"></TelerikNotification>

@code {
    public TelerikNotification NotificationReference { get; set; }

    public void AddColoredNotifications()
    {
        var fields = typeof(Telerik.Blazor.ThemeColors)
                .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static |
                   System.Reflection.BindingFlags.FlattenHierarchy)
                .Where(fi => fi.IsLiteral && !fi.IsInitOnly).ToList();

        for (int i = 0; i < fields.Count; i++)
        {
            var currentField = fields[i];
            var color = currentField.GetValue(null).ToString();

            NotificationReference.Show(new NotificationModel()
            {
                Text = $"Notification with color theme - {color}",
                ThemeColor = $"{color}"
            });
        }
    }
}

The ThemeColor parameter renders as the k-notification-<ThemeColor> CSS class on the specific notification HTML element and you can set it to a custom value to cascade through, and set the color to a setting of your own without customizing the entire theme.

Custom Notification color without customizing the Telerik Theme

custom themecolor screenshot

@* Sample of using a custom notification theme color from your own styles *@

<style>
    .k-notification-custom-color {
        background-color: cyan;
    }
</style>

<TelerikButton OnClick="@AddNotification">Add a notification</TelerikButton>

<TelerikNotification @ref="@NotificationReference"></TelerikNotification>

@code {
    public TelerikNotification NotificationReference { get; set; }

    public void AddNotification()
    {
        NotificationReference.Show(new NotificationModel()
        {
            Text = "Auto Closable Notification",
            ThemeColor = "custom-color"
        });
    }
}

See Also

In this article
Not finding the help you need? Improve this article