通知 (Notify)

主要用于系统通知,位于页面右下角,支持不同样式。

概述

  • 通知提醒默认位于右下角
  • 支持默认、主要、成功、信息、警告、危险样式
  • 默认5000毫秒后自动关闭,可自定义
  • 内容支持html字符

代码演示

1.默认示例

namespace WebSite.Docus.Feedback.Notifys;

class Notify1 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Button("默认", Callback(OnDefault));
        builder.Button("主要", Callback(OnPrimary), StyleType.Primary);
        builder.Button("成功", Callback(OnSuccess), StyleType.Success);
        builder.Button("信息", Callback(OnInfo), StyleType.Info);
        builder.Button("警告", Callback(OnWarning), StyleType.Warning);
        builder.Button("危险", Callback(OnDanger), StyleType.Danger);
    }

    private void OnDefault() => UI.Notify("这里是默认类通知!", StyleType.Default);
    private void OnPrimary() => UI.Notify("这里是主要类通知!", StyleType.Primary);
    private void OnSuccess() => UI.Notify("这里是成功类通知!", StyleType.Success);
    private void OnInfo() => UI.Notify("这里是信息类通知!", StyleType.Info);
    private void OnWarning() => UI.Notify("这里是警告类通知!", StyleType.Warning);
    private void OnDanger() => UI.Notify("这里是危险类通知!", StyleType.Danger);
}

2.自定义示例

namespace WebSite.Docus.Feedback.Notifys;

class Notify2 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Button("自定义内容", Callback(OnContent), StyleType.Primary);
        builder.Button("自定义关闭时间", Callback(OnTime), StyleType.Primary);
    }

    private void OnContent() => UI.Notify("<h1>这里是自定义内容通知!</h1>", StyleType.Primary);
    private void OnTime() => UI.Notify("这里是自定义关闭时间通知!<br/>10秒后自动关闭。", StyleType.Primary, 10000);
}