UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载导读在 ant-design-blazor 中通知提醒框Notification默认从视口的右上角弹出但通过NotificationPlacement枚举可以灵活地将通知定位到视口的右上角、右下角、左下角、左上角甚至还支持顶边居中与底边居中的扩展模式。本文以官方「位置Placement」演示文档为骨架结合 Placement.razor 示例与components/notification目录下的服务端实现完整讲解六种弹出位置的用法、NotificationConfig.Placement与NotificationGlobalConfig.Placement的配置差异、底层定位原理CSS 内联样式与容器分区并给出可复制的完整代码。一、位置演示通知可以从视口的四个角与上下边弹出官方演示文档 placement.md 的核心说明只有一句通知从右上角、右下角、左下角、左上角弹出A notification box can appear from thetopRight,bottomRight,bottomLeftortopLeftof the viewport。这一主题在 ant-design-blazor 中的实际落地远不止四个角。查看枚举定义 NotificationPlacement.cs可以看到组件支持的全部六个弹出位置public enum NotificationPlacement { TopLeft 0, TopRight 1, BottomLeft 2, BottomRight 3, Top 4, // 顶边居中 Bottom 5, // 底边居中 }其中前四个对应文档所述的四个角Top与Bottom是额外提供的顶边居中、底边居中模式。配套演示页面 Placement.razor 用六组按钮分别触发六种位置的通知inject INotificationService _notice Space SpaceItem Button TypeButtonType.Primary OnClickOnTopClick Icon TypeIconType.Outline.BorderTop / Top /Button /SpaceItem SpaceItem Button TypeButtonType.Primary OnClickOnBottomClick Icon TypeIconType.Outline.BorderBottom / Bottom /Button /SpaceItem /Space Divider / Space SpaceItem Button TypeButtonType.Primary OnClickOnTopLeftClick Icon TypeIconType.Outline.RadiusUpleft / TopLeft /Button /SpaceItem SpaceItem Button TypeButtonType.Primary OnClickOnTopRightClick Icon TypeIconType.Outline.RadiusUpright / TopRight /Button /SpaceItem /Space Divider / Space SpaceItem Button TypeButtonType.Primary OnClickOnBottomLeftClick Icon TypeIconType.Outline.RadiusBottomleft / BottomLeft /Button /SpaceItem SpaceItem Button TypeButtonType.Primary OnClickOnBottomRightClick Icon TypeIconType.Outline.RadiusBottomright / BottomRight /Button /SpaceItem /Space二、核心 API如何在打开通知时指定位置2.1 通过 NotificationConfig.Placement 指定单条通知的位置打开通知时位置通过NotificationConfig的Placement属性传入类型为NotificationPlacement?默认值为null即不显式指定交给默认位置逻辑处理。演示中的核心方法如下private async Task OpenWithPlacement(NotificationPlacement placement) { var config new NotificationConfig() { Message $Notification {placement} {DateTime.Now :O}, Description This is the content of the notification. This is the content of the notification. This is the content of the notification., Placement placement }; #if DEBUG config.Duration 0; // 调试模式下不自动关闭便于观察 #endif await _notice.Open(config); } private async Task OnTopLeftClick() await OpenWithPlacement(NotificationPlacement.TopLeft); private async Task OnTopRightClick() await OpenWithPlacement(NotificationPlacement.TopRight); private async Task OnBottomLeftClick() await OpenWithPlacement(NotificationPlacement.BottomLeft); private async Task OnBottomRightClick() await OpenWithPlacement(NotificationPlacement.BottomRight); private async Task OnBottomClick() await OpenWithPlacement(NotificationPlacement.Bottom); private async Task OnTopClick() await OpenWithPlacement(NotificationPlacement.Top);要点说明Message与Description为必选项均支持string或RenderFragment见 NotificationConfig.cs每条通知可用Key标记唯一标识不传时由服务自动生成Guid.NewGuid().ToString()见 NotificationService.cs示例中利用#if DEBUG将Duration置为 0使通知在调试环境下不自动关闭方便观察位置效果生产构建下则恢复默认 4.5 秒自动关闭。2.2 通过全局配置一次性设定默认位置如果希望整个应用的所有通知默认都从某个位置弹出无需在每条通知上重复设置Placement可以在应用启动或任意时机调用INotificationService.Config方法传入 NotificationGlobalConfig.csinject INotificationService _notice // 例如全局默认左下角 _notice.Config(new NotificationGlobalConfig { Placement NotificationPlacement.BottomLeft, Top 24, // 顶部弹出时距离顶部像素 Bottom 24, // 底部弹出时距离底部像素 Duration 4.5, // 默认自动关闭延时秒 Rtl false // 是否开启 RTL 模式 });对应关系与默认值可对照官方文档 index.zh-CN.md 中的NotificationGlobalConfig参数表参数说明类型默认值Bottom消息从底部弹出时距离底部的位置单位像素double?24Top消息从顶部弹出时距离顶部的位置单位像素double?24CloseIcon自定义关闭图标RenderFragment-Duration默认自动关闭延时单位秒double?4.5Placement弹出位置四角枚举NotificationPlacement?NotificationPlacement.TopRightRtl是否开启 RTL 模式boolfalse三、底层原理位置是如何被解析与渲染的3.1 默认位置的兜底逻辑右上角与 RTL 的差异当单条配置与全局配置都没有指定位置时组件会走默认逻辑。看 Notification.razor.cs 的GetDefaultPlacementprivate NotificationPlacement GetDefaultPlacement() { if (_defaultPlacement.HasValue) { return _defaultPlacement.Value; } return IsRtl() ? NotificationPlacement.TopLeft : NotificationPlacement.TopRight; }即非 RTL 环境默认TopRight右上角RTL 环境默认TopLeft左上角。这与官方文档 API 表中Placement的默认值NotificationPlacement.TopRight一致。同时ExtendConfig 在每条通知真正入队前完成默认值填充private NotificationConfig ExtendConfig(NotificationConfig config) { config.Placement ?? GetDefaultPlacement(); config.Duration ?? _defaultDuration; config.CloseIcon ?? _defaultCloseIcon; return config; }也就是说Placement的三级生效顺序为单条NotificationConfig.Placement 全局NotificationGlobalConfig.Placement 默认值RTL 时 TopLeft否则 TopRight。3.2 按位置分区存放ConcurrentDictionary 的结构组件内部以「位置」为维度维护通知列表。在 Notification.razor.cs 中private readonly ConcurrentDictionaryNotificationPlacement, ListNotificationConfig _configDict new ConcurrentDictionaryNotificationPlacement, ListNotificationConfig(); private readonly ConcurrentDictionarystring, NotificationConfig _configKeyDict new ConcurrentDictionarystring, NotificationConfig();_configDict以NotificationPlacement为键每个位置对应一个独立的通知列表_configKeyDict则以Key为键用于按唯一标志更新或关闭指定通知。这也意味着不同位置的通知容器彼此独立例如右上角与左下角可以同时存在多条通知互不干扰。3.3 CSS 类名与内联定位样式的生成渲染时Notification.razor 遍历_configDict为每个位置生成独立的容器 divforeach (var configKv in _configDict) { var placement configKv.Key; var configs configKv.Value; var className GetClassName(placement); var style GetStyle(placement); div keyplacement div keyplacement classclassName stylestyle refRef div foreach (var itemConfig in configs) { NotificationItem keyitemConfig ConfigitemConfig OnCloseRemoveItem OnMouseEnterOnMouseEnter OnMouseLeaveOnMouseLeave / } /div /div /div }类名由 GetClassName 生成Top前缀转换为小写t、Bottom前缀转换为小写b最终得到ant-notification-top、ant-notification-bottom、ant-notification-topLeft、ant-notification-topRight等RTL 模式下额外追加ant-notification-rtl。定位则由 GetStyle 通过inset/left/right/top/bottom内联样式直接实现private string GetStyle(NotificationPlacement placement) { switch (placement) { case NotificationPlacement.Top: return $inset: {_top}px auto auto 50%; transform: translateX(-50%);; case NotificationPlacement.Bottom: return $inset: auto auto {_bottom}px 50%; transform: translateX(-50%);; case NotificationPlacement.TopRight: return $right: 0px; top:{_top}px; bottom: auto;; case NotificationPlacement.TopLeft: return $left: 0px; top:{_top}px; bottom: auto;; case NotificationPlacement.BottomLeft: return $left: 0px; top: auto; bottom: {_bottom}px;; default: // BottomRight return $right: 0px; top: auto; bottom: {_bottom}px;; } }其中_top与_bottom分别来自全局配置的Top与Bottom默认均为 24 像素见 Notification.razor.cs。可见四角位置直接贴着视口边缘距离由 Top/Bottom 控制而Top/Bottom两种居中模式则利用left: 50%加translateX(-50%)实现水平居中。3.4 动画差异不同位置的进入动效位置不同进入动画也不同。样式文件 placement.less 定义了三种进入动画NotificationTopFadeIn顶部位置从上方滑入margin-top: -100%到0NotificationBottomFadeIn底部位置从下方滑入margin-bottom: -100%到0NotificationLeftFadeIn左侧位置topLeft/bottomLeft从右侧滑入right: notification-width到0。而右侧位置默认TopRight使用 index.less 中的NotificationFadeInleft: notification-width到0。这些动画类由NotificationConfig内部的AnimationClass控制进入为AnimationType.Enter关闭时切换为AnimationType.Leave见 Notification.razor.cs。3.5 容器挂载前提不要忘记 AntContainer所有通知内容最终需要渲染到页面上的某个容器中。官方文档 index.zh-CN.md 特别强调请确认已经在App.Razor中添加了AntContainer /组件。如果通知始终不显示这通常是最常见的原因。四、完整可运行示例四角 上下居中的实战模板将以下代码放入任意.razor页面即可完整复现官方演示效果inject INotificationService _notice Button TypeButtonType.Primary OnClick() OpenWithPlacement(NotificationPlacement.Top)Top/Button Button TypeButtonType.Primary OnClick() OpenWithPlacement(NotificationPlacement.TopLeft)TopLeft/Button Button TypeButtonType.Primary OnClick() OpenWithPlacement(NotificationPlacement.TopRight)TopRight/Button Button TypeButtonType.Primary OnClick() OpenWithPlacement(NotificationPlacement.Bottom)Bottom/Button Button TypeButtonType.Primary OnClick() OpenWithPlacement(NotificationPlacement.BottomLeft)BottomLeft/Button Button TypeButtonType.Primary OnClick() OpenWithPlacement(NotificationPlacement.BottomRight)BottomRight/Button code { private async Task OpenWithPlacement(NotificationPlacement placement) { var config new NotificationConfig() { Message $Notification {placement}, Description This is the content of the notification., Placement placement, Duration 4.5 }; await _notice.Open(config); } }运行前提项目中已注册通知服务NotificationService实现INotificationService官方模板默认已配置App.Razor中已添加AntContainer /若使用Info/Success/Warning/Error等快捷方法它们会调用Open并设置对应的NotificationType图标样式见 NotificationService.cs同样支持Placement配置。五、测试佐证位置配置如何被验证仓库的单元测试 NotificationTest.cs 展示了通知服务的标准测试方式通过MockINotificationService断言Info方法收到的NotificationConfig中Key、Message、Description是否符合预期配合 NotificationTestComponent.razor 中inject INotificationService _notificationServce的注入方式渲染组件并点击按钮触发。这说明NotificationConfig包括其中的Placement字段是通知 API 的唯一数据载体编写位置相关功能时同样可以用此模式验证指定位置的配置是否被正确传递。六、小结与使用建议四个角 上下居中NotificationPlacement共提供 6 种位置四角模式是官方文档的默认主题Top/Bottom适合需要强调全局推送的场景默认值牢记单条配置优先其次全局配置兜底为右上角RTL 为左上角距离可调通过NotificationGlobalConfig.Top/Bottom控制通知离视口边缘的像素距离默认 24pxRTL 适配开启Rtl后默认位置自动切换为左上角并应用ant-notification-rtl类样式见 rtl.less做镜像布局依赖容器务必确认AntContainer /已加入App.Razor否则通知不会显示。更多 API 细节NotificationRef的更新与关闭方法、OnClose/OnClick事件等可继续阅读官方组件文档 index.zh-CN.md或直接研读源码 Notification.razor.cs 与 NotificationService.cs 加深理解。赞分享UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载相关推荐Ant Design notification 组件 placement 详解配置通知弹出的六种位置Ant Design notification 组件 placement 详解配置通知弹出的六种位置 summary 本文基于 Ant Designant前端UI组件设计系统Ant Design Blazor DatePicker 弹出位置Placement配置实战与底层原理Ant Design Blazor DatePicker 弹出位置Placement配置实战与底层原理 本文围绕 Ant Design Blazor 中日期前端UI组件设计系统ng-zorro-antd Notification 通知位置Placement配置详解从六个方位到全局布局ng zorro antd Notification 通知位置Placement配置详解从六个方位到全局布局 导读 ng zorro antd 的 NotUI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考