前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载导读Spin加载中是 ant-design-blazor 中用于表达页面或区块正在加载的反馈型组件。除了独立使用的简单加载圈它更强大的能力是嵌套模式Embedded mode / 卡片加载中把任意现有内容直接内嵌进Spin即可将该容器整体置为加载状态内容区域自动加模糊遮罩与半透明效果。本文以官方 demo nested.md 为骨架结合组件源码与样式实现完整讲解嵌套模式的用法、全部参数、底层渲染逻辑与实战注意事项。什么是卡片加载中嵌套模式官方文档对嵌套模式的定义非常简洁可以直接把内容内嵌到Spin中将现有容器变为加载状态。 Embedding content intoSpinwill set it into loading state.也就是说Spin组件存在两种形态独立形态Simple只渲染一个加载指示器如Spin /或[基本用法](https://link.gitcode.com/i/57e69f84c079e6a05c94c0404be1f28f)中的场景嵌套形态nested / embeddedSpin内部包含ChildContent子内容此时加载指示器覆盖在内容之上内容区域被加模糊与遮罩处理形成卡片加载中的效果。从源码 Spin.razor.cs 可以看到判定逻辑private bool Simple ChildContent null;即只要传入了子内容Spin就自动进入嵌套模式。这也是本篇文章的核心主题。快速上手完整可运行的嵌套 Demo官方配套的示例代码位于 Nested.razor完整代码如下div Spin Spinningloading Alert MessageAlert message title DescriptionFurther details about the context of this alert. TypeAlertType.Info / /Spin div stylemargin-top: 16px Loading state Switch Checkedloading OnChangetoggle / /div /div code { bool loading false; void toggle(bool value) loading value; }这段代码展示了嵌套模式最核心的三个要点Spin直接包裹业务内容这里把Alert提示框放进Spin标签内部Alert就成了被加载状态覆盖的卡片用Spinning参数控制加载状态Spinningloading当loading为true时容器进入加载态为false时恢复正常显示通过外部控件动态切换用一个Switch开关绑定Checkedloading与OnChangetoggle实时驱动加载状态的切换便于直观感受两种状态的视觉差异。初始时loading false页面正常显示 Alert 卡片拨动 Switch 后loading变为true卡片上随即浮现旋转的加载指示器内容区域同时变模糊、呈半透明、且不可交互。底层原理嵌套模式是如何渲染的模板结构Spin.razor查看 Spin.razor 的模板实现可以发现嵌套模式实际渲染为两层结构if (Simple) { simpleTemplate(this) } else { div classWrapperClassMapper.Class refRef div simpleTemplate(this) /div /div }当不满足Simple即存在子内容时外层套一个WrapperClassMapper驱动的容器其 class 中包含ant-spin-nested-loading见 Spin.razor.cs 的SetClass方法simpleTemplate内部根据_isLoading决定是否渲染加载指示器同时渲染承载子内容的ant-spin-container容器RenderFragmentSpin simpleTemplate spin Template if (spin._isLoading) { div classspin.ClassMapper.Class idspin.Id stylespin.Style refspin.Ref if (spin.Indicator ! null) { spin.Indicator } else { spin.defaultTemplate } if (spin.Tip ! null) { div classant-spin-textspin.Tip/div } /div } if (!spin.Simple) { div classant-spin-container spin.ContainerClass spin.ChildContent /div } /Template;由此可以得出嵌套模式的最终 DOM 骨架div.ant-spin-nested-loading ├── div │ ├── div.ant-spin.ant-spin-spinning 加载指示器绝对定位覆盖 │ │ ├── span.ant-spin-dot 默认四点旋转动画 │ │ └── div.ant-spin-text 可选Tip 文案 │ └── div.ant-spin-container.ant-spin-blur 子内容容器加载时加模糊状态驱动模糊遮罩的开关子内容容器上的 class 由 Spin.razor.cs 计算private string ContainerClass _isLoading ? ${PrefixCls}-blur : ;加载时容器被加上ant-spin-blur恢复后该 class 被移除。_isLoading的同步逻辑位于OnParametersSet当Spinning参数变化时直接更新内部状态并触发StateHasChanged()重渲染Spin.razor.cs。样式层模糊、遮罩与不可交互样式实现位于 index.less关键规则如下.ant-spin-nested-loading设置position: relative作为加载指示器的定位基准 div .ant-spin中的指示器采用position: absolute撑满整个容器width/height: 100%z-index: 4覆盖在内容之上.ant-spin-container设置position: relative与transition: opacity 0.3s并使用::after伪元素实现遮罩层z-index: 10.ant-spin-blur开启后内容区opacity: 0.5、user-select: none、pointer-events: none——这正是加载中禁止交互、防止误操作的底层实现指示器的四点圆球由antSpinMove透明度交替与antRotate整体旋转两组keyframes驱动index.less。从源码结构可以推断嵌套模式模糊 半透明 屏蔽点击的体验完全由 CSS 层保证Blazor 组件层只负责按需切换ant-spin-blur类名。核心参数详解API 全景官方 API 文档 index.zh-CN.md 列出了以下参数结合 Spin.razor.cs 的[Parameter]声明与默认值整理如下参数说明Blazor 类型默认值Spinning是否为加载中状态嵌套模式下直接决定内容容器是否加ant-spin-blurbooltrueDelay延迟显示加载效果的时间毫秒防止状态快速切换导致闪烁int0Size组件大小可选small、default、largeSpinSizeSpinSize.DefaultTip当作为包裹元素时可自定义描述文案显示在指示器下方stringnullIndicator自定义加载指示符替代默认四点动画RenderFragmentnullWrapperClassName嵌套模式下外层包装容器的类属性stringnullChildContent被包裹、需进入加载状态的内容RenderFragmentnull其中SpinSize枚举定义在 SpinSize.cs取值为Small、Default、Large。组件按Size在 class 上追加ant-spin-sm或ant-spin-lgSpin.razor.cs对应样式见 index.lesssmall 圆球 6px、默认 9px、large 14px。几点说明官方 API 表沿用了 React 版 antd 的表述如ReactNode、number实际在 Blazor 中对应类型以上表为准Spinning默认值为true若不显式传参嵌套内容会直接处于加载态官方 demo 显式绑定Spinningloading正是为了可控文档中提到 React 版的静态方法Spin.setDefaultIndicator用于全局自定义指示器在 Blazor 版本中暂无对应静态方法请通过Indicator参数按组件粒度自定义。进阶实战一给加载态加上 Tip 文案在嵌套模式下Tip会在指示器下方渲染一行描述文字class 为ant-spin-text。官方示例 Tip.razorSpin TipLoading... Alert MessageAlert message title DescriptionFurther details about the context of this alert. TypeAlertType.Info / /Spin此时容器上方显示旋转指示器并在其下方展示 Loading... 文案。样式上.ant-spin-show-text会调整指示器的垂直偏移margin-top: -(dot-size/2) - 10px为文案预留空间index.less。注意Tip仅在嵌套模式有子内容下才有意义因为独立形态没有内容容器可描述。进阶实战二Delay 延迟加载防止闪烁异步请求很快返回时加载态一闪而过会造成视觉抖动。Delay参数毫秒专门用于解决这一问题官方示例 DelayAndDebounce.razorSpin Spinningloading Delay500 Alert MessageAlert message title DescriptionFurther details about the context of this alert. TypeAlertType.Info / /Spin其底层实现是System.Timers.Timer延迟生效组件初始化时若Delay 0即创建定时器Spin.razor.cs并在OnParametersSet中检测到Spinning变化时重启定时器延时结束后才更新_isLoading并触发重渲染Spin.razor.cs。组件销毁时定时器被Dispose避免资源泄漏Spin.razor.cs。用法要点将Delay设为略大于预计最快返回时间例如 500ms即可在快速响应场景下完全不闪加载动画而慢请求仍能看到完整加载态。进阶实战三用 Indicator 自定义加载指示器官方示例 CustomIndicator.razor 展示了用图标替换默认四点动画Spin IndicatorantIcon / code{ RenderFragment antIcon Icon TypeIconType.Outline.Loading Stylefont-size: 24px Spin /; }Indicator是一个RenderFragment渲染时优先输出Indicator否则回退到默认的ant-spin-dot四点动画Spin.razor。该能力在嵌套模式中同样生效——你可以为卡片加载中定制品牌化的加载动效。嵌套模式最佳实践始终显式控制SpinningSpinning默认true请像官方 demo 那样绑定真实的数据加载状态如bool loading并在异步任务完成后置回false结合真实异步场景常见范式是将loading与async方法联动例如列表刷新、表单提交期间置truefinally中置false保证无论成败都能恢复内容交互善用Delay防闪烁对大概率快速返回的本地缓存或内存数据请求设置 200~500ms 延迟可显著提升观感必要时配合Tip加载超过秒级的操作如导出、批量处理给用户明确的文案预期注意交互屏蔽加载期间内容区pointer-events: none用户无法点击因此不要让加载态长时间覆盖关键操作入口超时要有兜底尺寸选择卡片内部空间较小时优先SizeSpinSize.Small独立占位场景如内部示例再考虑Default/Large。小结Spin 的卡片加载中嵌套模式本质是一个以ChildContent是否为空为分界的双形态组件传入内容即自动套上ant-spin-nested-loading包裹层加载时通过ant-spin-blur类完成内容的模糊、降透明度与点击屏蔽。配合Spinning、Delay、Tip、Indicator四个高频参数即可在 ant-design-blazor 中轻松实现与 Ant Design 一致的区块级加载体验。建议结合组件文档 index.zh-CN.md、源码 Spin.razor.cs 与样式 index.less 进一步深入研读。赞分享前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载相关推荐MAS 激活脚本一条命令免费激活 Windows 11 与 Office 的完整指南MAS 激活脚本一条命令免费激活 Windows 11 与 Office 的完整指南 MAS 激活脚本是一个开源的 Windows 激活工具把 HWID、O操作系统Ant Design Spin 组件完整指南加载动画、嵌套遮罩、进度与全屏模式Ant Design Spin 组件完整指南加载动画、嵌套遮罩、进度与全屏模式 Spin 是 Ant Designantd中用于表示页面或区块「加载中」状前端UI组件设计系统Ant Design Spin 内嵌模式Embedded Mode实战将任意容器变为加载状态Ant Design Spin 内嵌模式Embedded Mode实战将任意容器变为加载状态 Spin 是 Ant Design 反馈类组件中用于承载“页前端UI组件设计系统上一篇nopad_inception_v3_fcn 实战指南无 Padding 全卷积 Inception v3 的任意尺寸补丁推理实现下一篇Gatsby RSS Feed 生成实战以 gatsby-plugin-feed 与 Markdown 博客内容为例创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考