Blazor通知概述

的信息Blazor通知组件以及它的主要特点。

Notification组件向用户呈现一条简短的消息,其中包含有关应用程序中进程状态的信息。使用它的设置,你可以自定义它的位置,动画选项和渲染。

《Blazor Ninja》图像的teleerik UI

Notification组件是《Blazor》的teleerik UI,一个专业级的UI库,有100个本地组件,用于构建现代和功能丰富的应用程序。要想尝试一下,注册一个30天的免费试用。

创建Blazor通知

  1. 添加< TelerikNotification >标签到你的剃刀页面。
  2. 通过获取组件引用@ref
  3. 的实例NotificationModel(由Telerik Blazor包提供),并将其传递给显示()组件实例的方法。
@*这显示了一个简单的文本消息,自动隐藏*@ 添加一个基本通知  @code {public TelerikNotification NotificationReference {get;设置;}公共无效AddNotification() {NotificationReference。Show(new NotificationModel() {Text = "自动关闭通知",ThemeColor = themeconconstants .Notification.ThemeColor. primary});}} 
         
参数 类型和默认值 描述
字符串 将在Notification组件的主包装元素上呈现的CSS类< div class = " k-notification-container”>。你可以用那个类来控制组件的大小或z-index。你可以找到更多的信息和例子外观篇文章。
OnChange EventCallback < bool > 此事件指示媒体查询字符串是否提供给媒体参数匹配当前浏览器大小。它会在匹配和停止匹配时触发。看到事件文章获取更多信息。
AnimationType AnimationType枚举
褪色
允许您自定义通知的动画。你可以找到更多的信息和例子外观篇文章。
AnimationDuration int
300
以毫秒为单位定义动画的持续时间。
VerticalPosition NotificationVerticalPosition枚举
定义通知的垂直位置。
HorizontalPosition NotificationHorizontalPosition枚举
正确的
定义通知的水平位置。

NotificationModel类属性

NotificationModel类用于向页面添加新通知。您可以使用它为想要显示的每条消息设置设置。该类包含以下属性:

财产 类型和默认值 描述
ThemeColor 字符串 通过该参数控制通知的颜色。你可以找到更多的信息和例子外观篇文章。
可闭 保龄球
真正的
如果设置为真正的将出现一个关闭按钮,使用户能够关闭通知。如果您希望通知不自动关闭,您应该设置可闭paramter来真正的CloseAfter0
CloseAfter int
5000
允许您配置通知组件在多长时间后自动关闭。将其设置为0防止自动关闭。
ShowIcon 保龄球
真正的
允许您指定图标是否应该出现在组件中。
图标 字符串 属性时将在组件中呈现的图标ShowIcon参数设置为真正的。中可以找到有关向teleerik组件添加图标的更多信息Telerik字体图标文章
文本 字符串 将在Notification组件中呈现的文本。

下一个步骤

另请参阅

在本文中
Baidu
map