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点击查看免费下载导读在 Blazor 应用中当用户提交表单、发起支付、执行导入导出等操作后页面需要一个清晰、规范的区域来反馈处理结果。ant-design-blazor 提供的Result组件正是为此设计它内置success / error / info / warning / 403 / 404 / 500七种状态每种状态对应预设图标与配色并支持自定义标题、副标题、操作按钮与内容区域。本文以 Info 示例 为切入点结合 Result 组件源码完整讲解 Result 组件的参数体系、状态-图标映射规则、自定义图标与内容区扩展方法帮助你在一套 API 内搭建出专业的结果反馈页面。一、场景定位什么时候该用 Result 组件Result组件在官方文档中被归类为「反馈Feedback」类组件定位是反馈一系列操作任务的处理结果。官方中文文档Result 组件文档给出的使用建议是当有重要操作需告知用户处理结果且反馈内容较为复杂时使用。也就是说它并不适合所有轻量提示场景——简单的成功/失败提示应优先使用Message或Notification只有当结果反馈内容比较复杂例如包含错误明细、需要提供多个后续操作按钮、或者需要整页展示状态时才适合引入Result。典型的落地场景包括支付成功页、提交失败详情页、无权限提示页403、页面不存在页404、服务器错误页500等。Result组件的完整实现位于 components/result/ 目录下核心文件为 Result.razor渲染模板与 Result.razor.cs参数与逻辑两者共同支撑了本文讲解的所有行为。二、Info 示例逐行解析最小的 Result 用法「Info」演示info.md的意图非常直白展示处理结果Show processing results。它对应的可运行示例代码 Info.razor 是理解 Result 组件的最小完整用例Result TitleYour operation has been executed Extraextra / code { RenderFragment extra Button TypeButtonType.Primary Go Console /Button; }这段代码只用了两个参数却完整展现了 Result 组件的两种核心输入方式Title结果主标题。此处传入字符串Your operation has been executed你的操作已执行。它是组件最醒目的视觉元素对应模板中的div classant-result-title见 Result.razor。Extra操作区RenderFragment。此处通过 C# 代码块定义一个RenderFragment内部渲染一个主按钮Button TypeButtonType.Primary文字为 Go Console。模板中Extra非空时会被渲染进div classant-result-extra见 Result.razor且样式表为其内联子元素提供了 8px 间距见 index.less多个按钮并排时会自动留白。注意一个细节Extra接收的是RenderFragment而非字符串因此操作区可以放置任意复杂的 Blazor 内容——按钮、链接、表单、甚至嵌套组件都可以。示例中把RenderFragment定义在code块里再通过Extraextra传入是官方示例的惯用写法你也可以像Success示例Success.razor那样直接在标签内写Extra子内容。由于未显式指定Status本例采用默认值ResultStatus.Info源码中Status { get; set; } ResultStatus.Info;见 Result.razor.cs因此图标为 info-circle、配色为信息蓝。三、完整 API七个可配置参数全解析Result组件的官方 API 文档index.zh-CN.md公布了 5 个核心参数。对照源码Result.razor.cs实际公开参数共有 8 个下面给出完整对照表官方文档参数 源码补充参数参数说明类型默认值Titletitle 文字string|RenderFragment空字符串TitleTemplate标题模板优先级高于TitleRenderFragment-SubTitlesubTitle 文字string|RenderFragment空字符串SubTitleTemplate副标题模板优先级高于SubTitleRenderFragment-Status结果状态决定图标和颜色success|error|info|warning|404|403|500infoIcon自定义 iconstring格式{type}-{theme}-Extra操作区RenderFragment-IsShowIcon是否显示图标booltrueChildContent子内容展示在标题/副标题与操作区之间RenderFragment-几个值得展开的要点1. 标题与副标题都支持模板化。模板逻辑见 Result.razor当TitleTemplate非空时渲染模板否则渲染字符串TitleSubTitleTemplate同理。这意味着你可以把富文本例如带链接或高亮关键词的标题塞进标题区。2.Status是驱动整套视觉表现的核心开关。它既决定 CSS 前缀类ant-result-success、ant-result-error等又决定默认图标详见下一节。枚举定义在 ResultStatus.cs 中取值与官方文档一一对应Success、Error、Info、Warning、Http404、Http403、Http500。3.ChildContent提供正文内容区。当需要展示比副标题更复杂的内容如错误明细列表时把它放进Result标签内部即可会渲染进div classant-result-content见 Result.razor样式上带浅色背景与内边距见 index.less与上下区块自然区隔。四、Status 与图标映射从源码看懂七种状态如果不传自定义Icon组件会根据Status自动选择默认图标。映射逻辑集中在 Result.razor.cs 的DetermineIconType()方法中Status默认图标type图标主题theme渲染形式ResultStatus.Info默认info-circleFill图标ResultStatus.Successcheck-circleFill图标ResultStatus.WarningwarningFill图标ResultStatus.Errorclose-circleFill图标ResultStatus.Http403__unauthorized默认图片SVGResultStatus.Http404__not-found默认图片SVGResultStatus.Http500__bad-request默认图片SVG源码中IsImage判断Result.razor.cs表明前四种状态渲染矢量图标而后三种 HTTP 状态码渲染内置的异常插画图片。图片通过IconService.GetIconImg()从IconStore获取 SVG 字符串见 IconService.cs以MarkupString形式插入 DOM见 Result.razor。因此前四者受主题色影响后三者则是固定的插画图形。对应的状态配色定义在 index.lesssuccess使用success-colorerror使用error-colorinfo使用info-colorwarning使用warning-color全部取自组件库的主题变量体系随主题切换自动变化。对应到界面上的具体差别可以参考官方提供的状态页示例_403.razorSorry, you are not authorized to access this page.、_404.razorSorry, the page you visited does not exist.、_500.razorSorry, something went wrong.。三个示例均为StatusTitleSubTitleExtra一个 Back Home 主按钮的组合可直接复用于路由兜底页。五、自定义图标与隐藏图标当默认图标不满足需求时Icon参数允许完全替换图标格式为{type}-{theme}主题可选fill、twotone、outline。官方示例 CustomIcon.razor 展示了两种用法Result Iconsmile-outline TitleGreat, we have done all the operations! Extraextra /Result Divider/Divider Result IsShowIconfalse TitleGreat, we can hide the icon! /Result code { RenderFragment extra Button TypeButtonType.PrimaryNext/Button; }Iconsmile-outline把图标换成 outline 主题的 smile 图标注意Icon的解析逻辑Result.razor.cs——它会按最后一个-拆分出图标类型与主题主题字符串fill映射IconThemeType.Fill、twotone映射IconThemeType.TwoTone其余包括outline默认映射IconThemeType.Outline。IsShowIconfalse完全隐藏图标区适合纯文字型结果页。更灵活的动态切换玩法见 ChangeTheResult.razor它把Icon、Status、Title、SubTitle全部绑定到组件状态通过RadioGroup选择图标、Select切换七种状态实时重渲染结果页代码里还处理了「图片类状态403/404/500不允许自定义图标」的联动逻辑切换为图片状态时自动清空icon从侧面印证了上文所述图标与图片两种渲染路径的分野。六、复杂内容区Extra 与 ChildContent 的组合用法「Info」示例只展示了单按钮的Extra而真实业务中操作区往往不止一个按钮、正文区也常有明细。参考 Error.razor对应 复杂的错误反馈 演示可以看到完整形态Result StatusResultStatus.Error TitleSubmission Failed SubTitlePlease check and modify the following information before resubmitting. Extraextra div classdesc Paragraph Text Strong Stylefont-size: 16px; The content you submitted has the following error: /Text /Paragraph Paragraph Icon TypeIconType.Outline.CloseCircle / Your account has been frozen aThaw immediately gt;/a /Paragraph Paragraph Icon TypeIconType.Outline.CloseCircle / Your account is not yet eligible to apply aApply Unlock gt;/a /Paragraph /div /Result code { RenderFragment extra Template Button TypeButtonType.PrimaryGo Console/Button ButtonBuy Again/Button /Template ; }这个例子把 Result 组件的三种内容区全部用满TitleSubTitle概括失败结论与引导语标签内子内容ChildContent用Paragraph组织错误明细列表每条带错误图标与跳转链接Extra主按钮Primary 次按钮默认样式双操作。按需组合这三个区域即可从一句话结果扩展为结论 明细 行动的完整反馈页。七、与 Blazor ErrorBoundary 集成自动化的错误结果页Result组件还能与 .NET 6 内置的ErrorBoundary协作把未捕获异常自动渲染成友好的错误页。官方演示 ErrorBoundaryDemo.razorErrorBoundary referrorBoundary ChildContent Button Danger OnClickOnClick Click me to throw a error /Button /ChildContent ErrorContent Contextex Result StatusResultStatus.Error Titleex.Message SubTitleex.StackTrace Extra Button TypeButtonType.Primary OnClickerrorBoundary.Recover Recover /Button /Extra /Result /ErrorContent /ErrorBoundary code { ErrorBoundary errorBoundary; void OnClick() { throw new Exception(An Uncaught Error); } }要点在于ErrorContent模板中把异常对象ex的Message绑定到Title、StackTrace绑定到SubTitle并用StatusResultStatus.Error呈现错误视觉Recover按钮则调用ErrorBoundary.Recover()让应用恢复渲染。这为 Blazor 应用的全局异常兜底提供了一种开箱即用的结果页方案。八、从源码看渲染结构Result 组件的骨架理解Result的 DOM 结构有助于自定义样式。渲染模板Result.razor的结构如下div.ant-result[.ant-result-{status}] ├── div.ant-result-icon / .ant-result-image 图标或异常插画IsShowIcon 控制 ├── div.ant-result-title Title / TitleTemplate ├── div.ant-result-subtitle SubTitle / SubTitleTemplate ├── div.ant-result-content ChildContent可选 └── div.ant-result-extra Extra 操作区可选根节点类名由ClassMapper动态拼装前缀ant-result加状态后缀Result.razor.cs并支持 RTLant-result-rtl图标区与图片区共用ant-result-icon/ant-result-image类图片模式下固定250px × 295pxindex.less标题、副标题、操作区均水平居中整体内边距48px 32pxindex.less天然适合整页或卡片式展示。九、小结与延伸阅读一句话总结Result组件用Status决定整套视觉基调图标/插画 主题色用Title/SubTitle交代结论用ChildContent承载明细用Extra提供后续行动八个参数覆盖了从一行文字到复杂错误页的全部结果反馈需求。Info 状态默认值适合展示操作已执行这类中性完成信息与Success、Warning、Error三个图标状态以及403 / 404 / 500三个插画状态共同组成完整的状态矩阵。如果你想继续深入推荐依次阅读Result 组件完整 API 文档本文表格的官方出处Info 演示与源码实现最小用例 → 完整实现其余官方演示Success、Warning、Error、403、404、500、自定义图标、动态修改结果、ErrorBoundary 集成Result 样式源文件状态配色与布局细节这些文件全部位于当前仓库的components/result/与site/AntDesign.Docs/Demos/Components/Result/目录下可直接阅读并结合本文实践。赞分享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点击查看免费下载相关推荐ng-zorro-antd Result 组件 Info 状态实战用 nz-result 优雅展示操作处理结果ng zorro antd Result 组件 Info 状态实战用 nz result 优雅展示操作处理结果 导读 在管理后台与中后台业务系统中操作已执UI组件前端ant-design-blazor 结果组件ResultWarning 警告状态实战指南ant design blazor 结果组件ResultWarning 警告状态实战指南 导读 本文围绕 ant design blazor 结果组件 ReUI组件前端DeepSeek-V4 GraphTrainer 激活重计算实践指南full 与 dsv4-mhc 策略解析torchtitan-npuDeepSeek V4 GraphTrainer 激活重计算实践指南full 与 dsv4 mhc 策略解析torchtitan npu 导读 本文讲解前端UI组件设计系统上一篇Nunif完全攻略5分钟掌握AI图像增强与3D视频转换核心技术下一篇智能茅台预约系统5大核心功能助力高效抢购创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考