前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载Result结果组件是 ant-design-blazor 中用于反馈一系列操作任务处理结果的反馈类组件。本指南以官方文档index.en-US.md为核心结合组件源码、样式实现与官方演示代码系统讲解 Result 的 API 参数、状态与图标映射机制、内置异常页用法以及如何与 Blazor 的ErrorBoundary配合实现友好的错误兜底页面。读完本文你将能直接在自己的 Blazor 应用中构建成功、失败、警告、403/404/500 等各类结果页。Result 组件的定位与使用时机Result 组件对应 Ant Design 设计体系中的结果页模式用于承载操作流程的终点反馈。它解决的不是简单的弹出提示那是 Alert、Message 或 Notification 的职责而是内容较复杂、需要告知用户如何处理结果的整页反馈场景。按照官方文档index.zh-CN.md的界定典型的使用时机包括支付、下单、提交表单等流程完成后的成功页校验失败、业务被冻结等错误详情页需要列出多条错误原因权限不足403、页面不存在404、服务器异常500等系统级异常页需要用户进一步点击按钮跳转或执行补救操作的结果反馈。一句话当反馈内容只是一行提示时用轻量组件当反馈需要成体系地呈现图标、标题、说明和操作区时用 Result。API 参数全解官方文档给出的 API 表格如下其中Title、SubTitle、Status、Icon、Extra五个参数是组件公开的核心配置。在此基础上源码Result.razor.cs还提供了TitleTemplate、SubTitleTemplate、IsShowIcon、ChildContent四个补充参数下面一并展开参数说明类型默认值Title标题文字string|RenderFragment通过 TitleTemplate空字符串SubTitle副标题文字string|RenderFragment通过 SubTitleTemplate空字符串Status结果状态决定图标与配色ResultStatusSuccess|Error|Info|Warning|Http404|Http403|Http500InfoIcon自定义图标string格式为{type}-{theme}无按 Status 使用内置图标Extra操作区RenderFragment无IsShowIcon是否显示图标booltrueChildContent附加内容渲染在标题/副标题与 Extra 之间RenderFragment无要点说明Title/SubTitle在源码中默认值为string.EmptyResult.razor.cs同时各自存在一个同名RenderFragment模板参数TitleTemplate、SubTitleTemplate且注释明确Template 优先级更高。渲染时组件会优先使用模板否则回退到字符串Result.razor 中的判断逻辑为if (TitleTemplate ! null)TitleTemplate else Title。因此既可以直接传字符串也可以在需要富文本标题时提供任意 Blazor 模板内容。Status的类型是ResultStatus枚举定义见 ResultStatus.cs取值对应Success、Error、Info、Warning、Http404、Http403、Http500。枚举中的Http404、Http403、Http500三项对应文档表格里的404、403、500用于渲染整套的异常状态图。Icon采用{type}-{theme}的字符串格式例如smile-outline、check-circle-filltheme 支持fill、twotone、outline三种解析逻辑见下文源码分析。Extra是操作区典型内容是Button按钮组用于引导用户去控制台重新购买返回首页等后续动作。IsShowIcon与ChildContent是文档表格之外、源码中可用的补充能力前者允许完全隐藏图标例如只想展示纯文字结果后者可以在标题下方插入一段自定义内容区demo 中常用于列出错误明细。源码剖析状态、图标与颜色的映射机制渲染结构与布局Result 的模板Result.razor自上而下依次渲染四个区块层级关系清晰图标区ant-result-icon或ant-result-image受IsShowIcon控制标题区ant-result-title副标题区ant-result-subtitle可选的自定义内容区ant-result-content由ChildContent提供操作区ant-result-extra由Extra提供。组件继承自AntDomComponentBase最外层根元素为div类名由ClassMapper动态拼接为ant-result以及ant-result-{status}如ant-result-success、ant-result-403并支持 RTL 时追加ant-result-rtlResult.razor.cs。状态到图标的映射组件核心逻辑在DetermineIconType()方法Result.razor.cs当显式传入Icon参数时以最后一个-为分隔符拆出图标名与主题主题按fill、twotone、outline依次识别缺省视为Outline未传Icon时按Status映射内置图标Error→close-circleFill、Success→check-circleFill、Warning→warningFill、Info→info-circleFill三个异常状态Http403、Http404、Http500则映射到内置的__unauthorized、__not-found、__bad-request特殊图标——它们不再走字体图标而是通过IsImage判定Result.razor.cs以整幅 SVG 图片形式渲染样式尺寸为 250px × 295px见 index.less。图标非图片状态由BuildIcon动态构建Icon组件图标名与主题通过属性注入Result.razor.cs图片状态则由IconService.GetIconImg()实现见 IconService.cs从内置图标仓库IconStore取出 SVG 字符串后以MarkupString渲染。LoadImage()会在组件初始化OnInitializedAsync和参数更新OnParametersSet时执行保证Status/Icon变化后图标即时刷新。颜色的来源四种非异常状态的颜色来自主题变量default.less 等主题文件中的result-icon-font-size: 72px等对应样式规则位于 index.lesssuccess使用success-colorerror使用error-colorinfo使用info-colorwarning使用warning-color。这意味着你通过 ant-design-blazor 的主题定制机制如暗色/紧凑主题、ConfigProvider切换主题时结果页的图标配色会自动跟随无需额外处理。实战示例从成功页到异常页以下示例全部取自官方演示代码目录 site/AntDesign.Docs/Demos/Components/Result/demo可直接复制运行。1. 成功结果页SuccessResult StatusResultStatus.Success TitleSuccessfully Purchased Cloud Server ECS! SubTitleOrder number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait. Extra Button TypeButtonType.PrimaryGo Console/Button ButtonBuy Again/Button /Extra /Result完整代码见 Success.razor。这是最典型的用法Status指定成功态绿色对勾图标Title陈述结果SubTitle补充订单号等次要信息Extra提供两个后续操作按钮。2. 信息页与警告页信息页可以不显式指定Status默认即InfoResult TitleYour operation has been executed Extraextra / code { RenderFragment extra Button TypeButtonType.PrimaryGo Console/Button; }见 Info.razor警告页则指定ResultStatus.Warning见 Warning.razor。注意这里展示了一个实用技巧Extra是RenderFragment可以用code块中定义的RenderFragment变量赋值让模板更简洁。3. 复杂错误反馈Error错误场景往往需要列出多条失败原因。此时用ChildContent承载明细列表最合适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 Classsite-result-demo-error-icon / Your account has been frozen aThaw immediately gt;/a /Paragraph Paragraph Icon TypeIconType.Outline.CloseCircle Classsite-result-demo-error-icon / Your account is not yet eligible to apply aApply Unlock gt;/a /Paragraph /div /Result完整示例见 Error.razor。组件会把ChildContent渲染到标题下方的ant-result-content区域带浅色背景非常适合请检查以下错误并修改这类结构化提示。4. 403 / 404 / 500 异常页三个异常状态用法完全一致仅Status不同且无需自定义图标——组件会自动加载整套异常 SVG 图Result StatusResultStatus.Http403 Title403 SubTitleSorry, you are not authorized to access this page. Extraextra / code { RenderFragment extra Button TypeButtonType.PrimaryBack Home/Button; }对应示例见 _403.razor、_404.razor、_500.razor。实战中这三者非常适合与 Blazor 路由匹配如未匹配到路由时显示 404 页或与权限守卫逻辑配合。5. 自定义图标与隐藏图标Result Iconsmile-outline TitleGreat, we have done all the operations! Extraextra /Result Divider/Divider Result IsShowIconfalse TitleGreat, we can hide the icon! Extraextra /Result code { RenderFragment extra Button TypeButtonType.PrimaryNext/Button; }见 CustomIcon.razor。第一个例子演示Icon参数按{type}-{theme}传入smile-outline微笑 outline 图标第二个例子用IsShowIconfalse完全隐藏图标适用于希望弱化视觉冲击的纯文本结果页。6. 动态修改结果页Result 的所有关键参数都支持绑定因此可以在代码中动态切换。官方演示 ChangeTheResult.razor 展示了这样一个完整交互用RadioGroup切换自定义图标smile-outline/like-outline/bug-outline/ 空值回退到图片态用Select在七种ResultStatus之间切换Title与SubTitle随选择同步更新。其核心代码如下Result Iconicon Statusstatus Titletitle SubTitlesubTitle/Result code { private ResultStatus status ResultStatus.Info; private string icon smile-outline; private string title smile-outline; private string subTitle The status is info, and the icon used is smile-outline; }值得留意的两个逻辑细节当选择 403/404/500 等图片态时代码会把icon清空图片状态不接受自定义字体图标当清空图标且当前是图片态时自动把状态切回Info保证展示语义一致。由于LoadImage()在OnParametersSet中会重新执行图标与图片的切换无需手动刷新即可生效。7. 与 .NET 6 ErrorBoundary 组合Blazor 错误兜底页这是官方推荐的高级玩法demo 说明见 error-boundary.md完整代码见 ErrorBoundaryDemo.razor利用 Blazor 内置的ErrorBoundary捕获子组件渲染异常在ErrorContent中渲染一个 Result 错误页把异常信息暴露给用户并提供Recover按钮恢复ErrorBoundary 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); } }这个组合把 Result 的价值延伸到了运行时异常兜底未捕获异常不再以白屏或难懂的堆栈文本结束而是呈现一个符合设计规范、带恢复入口的错误页。它依赖 .NET 6 及之后版本提供的ErrorBoundary组件使用时请确认目标框架满足该要求。样式定制与主题适配Result 的样式集中在 components/result/style 目录由index.less主样式、rtl.lessRTL 布局、patch.less、entry.less构成。其中index.less定义了整体内边距48px 32px图标区margin-bottom: 24px、居中图标字体大小为主题变量result-icon-font-size默认主题下为72px紧凑主题下为64px见 compact.less标题字号result-title-font-size默认24px、副标题字号result-subtitle-font-size默认取font-size-base操作区外边距result-extra-margin默认24px 0 0 0且操作区内相邻按钮自动留8px间距内容区ant-result-content带浅色背景background-color-light与24px 40px内边距。若项目使用该库的主题系统ant-design-blazor.less及各主题入口文件可通过覆盖这些 Less 变量统一调整所有 Result 页的尺寸与间距无需逐个页面改动。结语Result 是 ant-design-blazor 中小而精的反馈组件参数面收敛五个核心参数即可覆盖绝大多数场景内部却完整承载了 Ant Design 的图标语义、状态配色、异常图资源和 RTL 支持。结合官方 demo 中动态切换ChildContent 明细列表ErrorBoundary 兜底等用法它可以优雅地覆盖从业务成功页到系统异常页的整条反馈链路。后续想深入了解其主题定制或与其他反馈组件Alert、Modal、Message的搭配取舍可继续翻阅仓库中的 components/result 目录与 Result 演示代码。赞分享前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载相关推荐ant-design-blazor Result 组件实战如何构建「操作成功」结果反馈页ant design blazor Result 组件实战如何构建「操作成功」结果反馈页 本文以 ant design blazor 仓库中的 Result前端UI组件设计系统Ant Design Blazor Result 组件 Error 状态实战构建复杂的错误反馈页面Ant Design Blazor Result 组件 Error 状态实战构建复杂的错误反馈页面 在 Web 应用中表单提交失败、账号状态异常、操作被拒绝UI组件前端Ant Design Blazor Result 组件完全指南状态反馈、异常页面与 Blazor 错误兜底实战Ant Design Blazor Result 组件完全指南状态反馈、异常页面与 Blazor 错误兜底实战 Result结果组件用于反馈一系列操作任务UI组件前端上一篇一站式密码学工具箱ToolsFx编码转换、加解密与CTF实战全攻略下一篇Prometheus Python Client入门指南5分钟快速搭建监控系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考