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点击查看免费下载导读Skeleton骨架屏是 ant-design-blazor 提供的反馈类组件用于在内容真正加载完成之前渲染一个与最终页面结构近似的占位图形组合让用户提前感知页面布局显著缓解等待焦虑。本文以官方“基本”示例 basic.md 为起点逐步讲解从最简单的Skeleton/Skeleton用法到完整的参数表、加载状态切换、骨架元素按钮/头像/输入框以及底层渲染与样式实现帮助你在自己的 Blazor 项目中快速落地骨架屏方案。最简单的用法一行代码原文档给出的“基本Basic”示例是整个 Skeleton 组件的起点其演示代码位于 Basic.razor只有一行Skeleton/Skeleton什么都不配置时组件会按照默认规则渲染出一组占位图形顶部一行标题占位条下方两行段落占位条第二行宽度固定为 61%。这是 Skeleton 最常见的默认形态也是任何复杂用法的基础。官方文档原文对它的描述是“最简单的用法”但一行代码背后隐藏着一套完整的默认值推导逻辑下面结合源码逐一拆解。默认渲染结构源码如何推导占位图形从 Skeleton.razor 可以看出组件的渲染逻辑非常直白div classClassMapper.Class styleStyle idId refRef if (Loading) { if (Avatar) { div classant-skeleton-header SkeletonElement TypeSkeletonElementType.Avatar SizeAvatarSize ShapeAvatarShape/SkeletonElement /div } div classant-skeleton-content if (Title) { h3 classant-skeleton-title stylewidth:ToCSSUnit(TitleWidth)/h3 } if (Paragraph) { ul classant-skeleton-paragraph foreach (var row in this._paragraphRowsList) { li stylewidth:ToCSSUnit(row)/li } /ul } /div } if (!Loading) { ChildContent } /div结合 Skeleton.razor.cs 中的参数默认值与初始化逻辑可以还原Skeleton/Skeleton的完整渲染过程Loading默认值为true源码Skeleton.razor.cs#L40-L41明确写有 true因此默认展示占位图值得注意的细节是官方 API 文档表中Loading一栏的默认值标注为-实际实现中却是true在使用时建议显式传值以避免误解。Title默认true、Paragraph默认true因此默认渲染出标题条 段落条。标题宽度TitleWidth的默认值由SetTitleProps动态推导Skeleton.razor.cs无头像且显示段落时38%有头像且显示段落时50%其它情况不显示标题占位或标题独占空字符串宽度 100%。段落行数由SetParagraphProps推导Skeleton.razor.cs未指定ParagraphRows时无头像且显示标题则渲染 2 行否则渲染 1 行段落最后一行的默认宽度为61%。CSS 类映射由SetClassMap完成Skeleton.razor.cs根元素始终带ant-skeleton开启头像时追加ant-skeleton-with-avatar开启动画时追加ant-skeleton-activeRTL 环境下追加ant-skeleton-rtl。也就是说一个裸Skeleton最终会渲染为ant-skeleton容器内包含ant-skeleton-content其中有一个ant-skeleton-title标题条宽 38%和一个两行的ant-skeleton-paragraph列表末行宽 61%。API 参数详解来自官方组件文档 index.zh-CN.md 的完整参数表如下Skeleton属性说明类型默认值Active是否展示动画效果booleanfalseAvatar是否显示头像占位图booleanfalseAvatarSize设置头像占位图的大小int \| large \| small \| default-AvatarShape指定头像的形状circle \| square-Loading为true时显示占位图反之直接展示子组件boolean-源码实现默认为trueParagraph是否显示段落占位图booleantrueParagraphRows设置段落占位图的行数int-ParagraphWidth设置段落占位图的宽度传数组时为每行分别指定宽度否则为最后一行的宽度int \| string \| Arrayint \| string-Title是否显示标题占位图booleantrueTitleWidth设置标题占位图的宽度int \| string-由源码按场景推导结合源码几个参数的细节值得展开AvatarSize/AvatarShape的默认值在SetAvatarProps中补齐Skeleton.razor.cs开启Avatar后未指定形状时自动取SkeletonElementShape.Circle圆形未指定大小时自动取SkeletonElementSize.Default。ParagraphWidth支持OneOfint?, string, IListOneOfint?, stringSkeleton.razor.cs传单个值时作为最后一行的宽度其余行宽度 100%传数组时逐行取对应宽度。其内部通过ParagraphWidth.Match分流处理三种类型Skeleton.razor.cs。ParagraphRows语义为“总行数”源码中rows ParagraphRows.Value - 1Skeleton.razor.cs最后一行的位置被宽度值占据因此最终渲染的行数与传入值一致。宽度值的单位处理统一走ToCSSUnitint会被StyleHelper.ToCssPixel转为像素值string则原样输出支持38%、300px等写法Skeleton.razor.cs。动画效果让占位图“呼吸”在基本用法之上开启动画只需一个参数演示见 Active.razorSkeleton Activetrue/SkeletonActive的动画效果由样式层实现定义在 index.less 的.skeleton-color()mixin 中占位块背景被替换为一段linear-gradient(90deg, skeleton-color 25%, skeleton-to-color 37%, skeleton-color 63%)并通过ant-skeleton-loading关键帧在translateX(-37.5%)与translateX(37.5%)之间循环时长 1.4s、无限次ease infinite。该 mixin 同时作用于标题、段落、头像、按钮、输入框等所有占位元素因此Active对整个骨架屏是全局生效的。源码中还通过z-index: 0; overflow: hidden;规避了 Safari 下border-radius与溢出裁切的兼容性问题。动画颜色取自主题变量default.less变量默认值作用skeleton-colorrgba(190, 190, 190, 0.2)占位块基础颜色skeleton-to-colorshade(skeleton-color, 5%)动画高光颜色加深 5%skeleton-title-height16px标题条高度skeleton-paragraph-li-height16px段落每行高度skeleton-paragraph-li-margin-topmargin-md段落行间距RTL 环境下动画方向会被 rtl.less 中定义的ant-skeleton-loading-rtl关键帧反转同时标题、段落的布局间距也会做镜像调整说明该组件完整支持从右向左的语言环境。复杂组合头像 多行段落对应“复杂的组合”演示 Complex.razorSkeleton Avatartrue ParagraphRows4/Skeleton设置Avatartrue后渲染结构会多出ant-skeleton-header区域内部通过SkeletonElement渲染一个默认圆形、默认尺寸的头像占位同时根节点追加ant-skeleton-with-avatar类ParagraphRows4则把段落行数扩展到 4 行。此时标题宽度按前述规则自动取50%与头像形成左图右文的典型卡片布局。这是图文信息较多的列表 / 卡片场景中最高频的骨架屏形态。用 Loading 切换加载态与子组件骨架屏最常见的实战形态是加载中显示占位图加载完成后无缝切换为真实内容。这依赖Loading参数与ChildContent的组合演示见 Children.razordiv classarticle Skeleton Loading_loading h4Ant Design, a design language/h4 p We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. /p /Skeleton Button onclickshowSkeleton Disabled_loading Show Skeleton /Button /div code{ private bool _loading false; private async Task showSkeleton() { this._loading true; await Task.Delay(3000); this._loading false; } }从 Skeleton.razor 的模板可见其切换机制Loading为true时只渲染占位图分支为false时渲染ChildContent两者互斥天然避免闪烁。这个模式可直接迁移到真实的数据加载场景——在OnInitializedAsync中先置Loading true发起请求拿到数据后置false即可实现“占位 → 内容”的平滑过渡。列表场景可参考 List.razor将Skeleton Loading_loading Active Avatar包裹在AntList的ListItem内占位与真实条目共用同一份数据渲染位置配合Active动画即可得到整列表的加载反馈。骨架元素按钮、头像与输入框当只需要对页面中的某个单一控件做占位时可以使用SkeletonElement完整示例见 Element.razor。其类型枚举定义在 SkeletonElementType.csButton/Input/Avatar大小与形状枚举分别在 SkeletonElementSize.csDefault/Large/Small和 SkeletonElementShape.csDefault/Circle/Round/Square中。三种类型的典型用法!-- 骨架按钮可配大小与形状 -- SkeletonElement TypeSkeletonElementType.Button Active_buttonActive Size_buttonSize Shape_buttonShape/SkeletonElement !-- 骨架头像可配大小与形状Size 还支持传入 int 指定像素边长 -- SkeletonElement TypeSkeletonElementType.Avatar Active_avatarActive Size_avatarSize Shape_avatarShape/SkeletonElement !-- 骨架输入框Size 只取 Default / Large / Small可额外叠加 style 控制宽度 -- SkeletonElement TypeSkeletonElementType.Input Active_inputActive Size_inputSize stylewidth:300px/SkeletonElement对应官方文档的 API 表SkeletonElement Typebutton属性说明类型默认值Active是否展示动画效果booleanfalseSize大小large \| small \| defaultdefaultShape形状circle \| round \| defaultdefaultSkeletonElement Typeavatar属性说明类型默认值Active是否展示动画效果booleanfalseSize大小int \| large \| small \| defaultdefaultShape形状circle \| squaresquareSkeletonElement Typeinput属性说明类型默认值Active是否展示动画效果booleanfalseSize大小large \| small \| defaultdefault从源码 SkeletonElement.razor.cs 可以看到实现要点OnInitialized中按Type分别调用SetButtonMap/SetAvatarMap/SetInputMap为内部span追加对应的ant-skeleton-button(-lg/-sm/-round/-circle)、ant-skeleton-avatar(-lg/-sm/-square/-circle)、ant-skeleton-input(-lg/-sm)等 CSS 类SkeletonElement.razor.cs。头像类型的Size若传入int会在OnParametersSet中直接将其转换为像素并写入内联样式width/height/line-heightSkeletonElement.razor.cs从而实现任意边长的自定义头像占位。尺寸类样式基于 Ant Design 的全局尺寸变量按钮取btn-height-base头像取avatar-size-base输入框取input-height-baselarge/small分别映射到对应的-lg/-sm尺寸index.less。使用场景与注意事项官方文档 index.zh-CN.md 给出的使用建议在实战中同样适用网络较慢、需要长时间等待加载处理的情况下图文信息内容较多的列表 / 卡片中只适合用在第一次加载数据的场景骨架屏可以被 Spin 完全代替但在可用场景下能提供比 Spin 更好的视觉效果和用户体验。几点补充建议骨架屏的占位尺寸与真实内容越接近用户跳读成本越低建议按页面真实布局分别使用Skeleton整块区域与SkeletonElement单一控件组合编排首次加载与后续刷新可区分处理首次使用骨架屏后续局部刷新仍可用Spin两者并不冲突骨架屏颜色、标题高度、段落行高、间距等均可通过覆盖 default.less 中的skeleton-*系列主题变量进行定制属于完整的主题体系一部分。小结从一行Skeleton/Skeleton出发本篇文章完整覆盖了 ant-design-blazor Skeleton 组件的默认渲染规则、全量 API 参数、动画效果、Loading切换机制以及SkeletonElement三要素用法并深入 Skeleton.razor.cs、SkeletonElement.razor.cs 与 index.less 源码还原了默认值推导、CSS 类映射与动画实现等底层细节。掌握了这些内容你就能在任何需要“等待加载”的 Blazor 页面中快速搭建出符合 Ant Design 设计语言的骨架屏体验。赞分享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 Skeleton 骨架屏组件完全指南占位加载、参数详解与实战应用ant design blazor Skeleton 骨架屏组件完全指南占位加载、参数详解与实战应用 导读 本文围绕 ant design blazor 组件前端UI组件设计系统猫抓浏览器插件3 步把页面视频存成完整 MP4猫抓浏览器插件3 步把页面视频存成完整 MP4 猫抓是一款开源的浏览器资源嗅探扩展支持 Chrome、Edge 与 Firefox 三个浏览器。它会把当前页音视频Ant Design Skeleton 骨架屏组件完全指南从基础用法到源码级原理解析Ant Design Skeleton 骨架屏组件完全指南从基础用法到源码级原理解析 Skeleton骨架屏是 Ant Design 提供的一组在内容加载前端UI组件设计系统上一篇gbrain Brain-First 技能合规检查实战以 compliant-phase 为例解析 Phase 1 头脑优先查找协议下一篇Prisma CLI 账户信息查询命令 prisma account 完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考