前端UI组件设计系统【免费下载链接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 项目地址https://gitcode.com/gh_mirrors/an/ant-design-vue点击查看免费下载Skeleton 是 Ant Design Vueant-design-vue提供的内容加载占位组件当页面数据尚未就绪时用灰色骨架块预先勾勒出标题、段落、头像、按钮、输入框等元素的轮廓避免布局跳动、降低用户等待焦虑。本文以 components/skeleton/index.en-US.md 文档为主体结合组件源码Skeleton.tsx、Element.tsx、Paragraph.tsx等与官方示例components/skeleton/demo/完整讲解全部 API、组合用法、loading切换机制以及底层实现原理读完即可在项目中落地一套高质量的骨架屏方案。什么时候使用 Skeleton官方文档给出了四条核心使用建议资源需要长时间加载时例如图表数据、详情接口返回前的等待阶段组件包含大量信息时典型的如 List 列表、Card 卡片一次性渲染大量结构骨架屏能有效缓解首屏白屏仅在首次加载数据时生效Skeleton 定位是首次加载占位二次刷新建议复用已缓存的结构或直接展示内容可被 Spin 替代但体验更优任何场景下都可用 Spin 加载态替代但 Skeleton 通过勾勒真实内容轮廓标题、段落、头像让用户预知页面结构感知上更流畅、更接近最终形态。简单地说Spin 表达系统正在加载Skeleton 表达内容长这样、马上就好。快速上手基础用法与组合骨架最简单的骨架屏只需要一行模板template a-skeleton / /template对应官方示例 components/skeleton/demo/basic.vue。默认渲染一个包含标题 段落的占位块。在 Skeleton.tsx 中可以看到默认值定义props: initDefaultProps(skeletonProps(), { avatar: false, title: true, paragraph: true, }),即默认显示title标题占位和paragraph段落占位不显示avatar。更贴近真实场景的是复杂布局示例 components/skeleton/demo/complex.vue组合头像 标题 段落以及列表示例 components/skeleton/demo/list.vue。头像 标题 段落的组合会自动生成一套经过视觉优化的默认比例这一逻辑由 Skeleton.tsx 中的三个辅助函数完成getAvatarBasicProps当有标题且无段落时返回{ size: large, shape: square }方形大头像否则返回{ size: large, shape: circle }圆形头像getTitleBasicProps无头像有段落时标题宽度38%有头像有段落时标题宽度50%getParagraphBasicProps默认行数 2 行无头像或无标题时末行宽度61%仅标题无头像时行数调整为 3 行。也就是说你只管声明要哪些块组件会自动编排出一套协调的骨架比例无需手动逐个调宽度。API 详解Skeleton 核心属性文档中 Skeleton 组件的完整属性表如下PropertyDescriptionTypeDefaultactive显示动画效果闪烁/呼吸渐变booleanfalseavatar显示头像占位boolean | SkeletonAvatarPropsfalseloading为true时显示骨架boolean-paragraph显示段落占位boolean | SkeletonParagraphPropstruetitle显示标题占位boolean | SkeletonTitlePropstrue对应源码 skeletonProps()注意源码中还有文档未列出的prefixCls与round两个内部/扩展属性active开启后骨架块呈现从左到右的流光扫过动画用于提示正在加载中avatar/title/paragraph既可传布尔值也可传对象。传true/false控制是否渲染该块传对象则进一步定制该块的形状、尺寸、宽度等细节见下文三个子 Props 表loading核心的真实内容切换开关。当loading为true时渲染骨架为false时渲染插槽default slot中的真实内容。源码判断逻辑见 Skeleton.tsxif (loading || props.loading undefined) { // ...渲染骨架占位 } return slots.default?.();关键细节当loading**未传值undefined**时Skeleton 默认也渲染骨架——这与文档中 Default 列为-的行为一致意味着该组件天然作为默认占位存在。只有显式传入loading{false}才会展示真实内容。加载完成切换loading 与子组件插槽官方示例 components/skeleton/demo/children.vue 展示了最经典的使用模式先用a-skeleton包裹真实内容再通过loading布尔值控制切换template a-space directionvertical stylewidth: 100% :size16 a-skeleton :loadingloading div h4Ant Design Vue, a design language/h4 pWe 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 /div /a-skeleton a-button :disabledloading clickshowSkeletonShow Skeleton/a-button /a-space /template script langts setup import { ref } from vue; const loading refboolean(false); const showSkeleton () { loading.value true; setTimeout(() { loading.value false; }, 3000); }; /script这一段就是骨架屏在真实业务中的标准用法数据请求发出时loading true显示骨架接口返回后loading false切换为真实内容。由于骨架与真实内容处于同一布局位置切换时页面结构几乎不变不会产生先空白、后跳动的割裂感。对应源码正是上文slots.default?.()的插槽渲染逻辑。子属性配置头像、标题、段落SkeletonAvatarProps头像PropertyDescriptionTypeDefaultshape头像形状circle|square-size头像尺寸number |large|small|default-用法示例a-skeleton :avatar{ size: large, shape: square } /源码见 Avatar.tsxshape支持circle/squaresize除枚举值外还支持数字此时按像素渲染宽高。数值尺寸的最终落地在 Element.tsxconst sizeStyle: CSSProperties typeof size number ? { width: ${size}px, height: ${size}px, lineHeight: ${size}px } : {};SkeletonTitleProps标题PropertyDescriptionTypeDefaultwidth标题宽度number | string-Title.tsx 的实现非常精简数字会被自动追加px单位字符串如50%直接作为 CSS width 使用const zWidth typeof width number ? ${width}px : width; return h3 class{prefixCls} style{{ width: zWidth }} /;SkeletonParagraphProps段落PropertyDescriptionTypeDefaultrows段落行数number-width段落宽度。传入数组时可为每一行单独设置宽度否则只设置最后一行的宽度number | string | Arraynumber | string-这是 Skeleton 中最灵活的配置。源码 Paragraph.tsx 展示了它的数组逐行 非数组仅末行语义const getWidth (index: number) { const { width, rows 2 } props; if (Array.isArray(width)) { return width[index]; // 数组逐行取对应宽度 } // 非数组仅最后一行rows - 1 index使用该宽度 if (rows - 1 index) { return width; } return undefined; };示例a-skeleton :paragraph{ rows: 4, width: [40%, 80%, 60%, 90%] } / !-- 四行段落每行宽度各不相同省略数组时 width 只作用于最后一行 --组合子组件Skeleton.Button / Input / Image / Avatar / Title3.0文档指出SkeletonButtonProps与SkeletonInputProps为 3.0 新增能力。除了主Skeleton组件外ant-design-vue 还以静态属性的形式挂载了 5 个独立子组件见 components/skeleton/index.tsxSkeleton.Button、Skeleton.Avatar、Skeleton.Input、Skeleton.Image、Skeleton.Title全部通过Skeleton.install一并注册到应用中模板中可直接使用a-skeleton-button、a-skeleton-avatar、a-skeleton-input、a-skeleton-image等标签。每个子组件的尺寸基准large/small/default与对应真实组件保持一致保证骨架形态 ≈ 真实形态。SkeletonButtonProps骨架按钮PropertyDescriptionTypeDefaultactive显示动画效果booleanfalseblock是否撑满父容器宽度booleanfalseshape按钮形状circle|round|default-size按钮尺寸large|small|default-SkeletonInputProps骨架输入框PropertyDescriptionTypeDefaultactive显示动画效果booleanfalsesize输入框尺寸large|small|default-SkeletonImage骨架图片源码 Image.tsx 内置了一段 SVG 图片占位viewBox0 0 1098 1024的山水图形路径无需任何 props 即可渲染一个带图标轮廓的图片占位块适用于商品图、封面图等场景。官方示例 components/skeleton/demo/element.vue 综合演示了按钮、头像、输入框、图片的搭配并附带了active动画开关、block按钮撑满、size尺寸切换、shape形状切换的交互控制面板是理解这几个子组件最直观的参考。组件内部结构上Button/Input/Avatar/Image均复用 Element.tsx 作为最终渲染单元——Element根据size追加-lg/-sm类、根据shape追加-circle/-square/-round类数字尺寸直接以内联样式设置宽高。源码级补充RTL、主题样式与注册机制RTL 支持主组件在 Skeleton.tsx 中通过direction.value rtl追加-rtl类配合useConfigInject自动感知 ConfigProvider 的方向配置无需手动处理镜像布局样式注入组件通过useStylecssinjs 方案见 components/skeleton/style/index.ts在渲染时按需注入样式并支持主题令牌Design Token定制与 hashId 作用域隔离接入 ConfigProvider 的主题能力后骨架色可随全局主题联动类型导出SkeletonButtonProps、SkeletonInputProps、SkeletonAvatarProps、SkeletonTitleProps、SkeletonProps等类型均从 components/skeleton/index.tsx 导出便于在script setup中做强类型约束示例 element.vue 中即通过SkeletonButtonProps[size]、SkeletonAvatarProps[shape]约束 ref 类型。总结Skeleton 最佳实践清单首次加载用 Skeleton刷新加载用 Spin按官方建议Skeleton 只适合首次数据加载让用户提前感知页面结构用loading 默认插槽做无缝切换把真实内容放进a-skeleton :loadingloading数据返回后自动替换避免布局跳动善用对象形式 propsavatar/title/paragraph传对象即可精确控制形状、尺寸、行数与逐行宽度而不必自己拼 CSS页面级骨架用组合形态头像 标题 段落会被自动编排出协调比例标题 50%、段落 2 行、末行 61%直接可用局部占位用子组件按钮、输入框、图片等场景优先使用a-skeleton-button、a-skeleton-input、a-skeleton-image形态与真实组件对齐开启active提升感知需要明确表达加载中时给骨架加上流光动画等待体验更好。通过本文的 API 表格、官方示例与源码解析你可以在 ant-design-vue 项目中快速实现从全页骨架到局部元素占位的完整加载体验。赞分享前端UI组件设计系统【免费下载链接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 项目地址https://gitcode.com/gh_mirrors/an/ant-design-vue点击查看免费下载相关推荐Buzz Welcome 频道 agent 互相回复不止runaway reply loop怎么排查Buzz Welcome 频道 agent 互相回复不止runaway reply loop怎么排查 如果你在 Buzz 的 Welcome 频道里看到前端UI组件设计系统Ant Design Skeleton 骨架屏组件全面实战指南占位组合、子组件、语义化样式与主题定制Ant Design Skeleton 骨架屏组件全面实战指南占位组合、子组件、语义化样式与主题定制 Skeleton骨架屏是 Ant Design 反馈前端UI组件设计系统Ant Design Skeleton 骨架屏组件完全指南占位加载、复合元素与源码实现剖析Ant Design Skeleton 骨架屏组件完全指南占位加载、复合元素与源码实现剖析 Skeleton 是 Ant Design 在“内容尚未就绪”阶段前端UI组件设计系统上一篇MIT App Inventor终极指南零代码开发Android/iOS应用的完整教程下一篇Leaf开发规范文档Java编码风格与API设计最佳实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考