Skeleton

概述

• SkeletonAvatar：占位头像，默认为圆形，默认尺寸：Avatar medium: width: 48px，height: 48px。支持 size、shape 属性
• SkeletonImage：占位图像，默认尺寸：width: 100%，height: 100%。
• SkeletonTitle：占位标题，默认尺寸：width: 100%， height: 24px。
• SkeletonParagraph：占位内容部分，默认尺寸：width: 100%，height: 16px，margin-bottom: 10px。
• SkeletonButton：占位按钮，默认尺寸：width: 115px，height: 32px。

注意：默认样式均可通过 class 或 style 进行自定义。

代码演示

如何引入

import { Skeleton } from '@chenzy-design/svelte';

基本使用

组合使用

图片和标题。

统计数字。

头像和标题。

居中段落和按钮。

头像、标题和段落。

表格。

加载动画

通过设置 active 属性可以展示动画效果。

API 参考

Skeleton

属性	说明	类型	默认值
active	是否展示动画效果	boolean	false
class	类名	string	-
loading	为 true 时，显示占位元素。反之则显示子组件	boolean	true
placeholder	加载等待时的占位元素	Snippet	-
style	样式	string	-

SkeletonAvatar

SkeletonImage，SkeletonTitle，SkeletonButton 大部分 API 与 SkeletonAvatar 相同。其中 shape 仅 SkeletonAvatar 支持。

属性	说明	类型	默认值
class	类名	string	-
size	设置头像的大小，支持 extra-extra-small、extra-small、small、medium、large、extra-large	string	medium
style	样式	string	-
shape	指定头像的形状，支持 circle、square	string	circle

SkeletonParagraph

属性	说明	类型	默认值
class	类名	string	-
rows	设置段落占位图的行数	number	4
style	样式	string	-

文案规范

• 不变的固定内容直接展示固定内容，可变的内容使用骨架屏展示

设计变量

animation

color

height

radius

spacing

width

变量	默认值	用法
--cd-animation-duration-skeleton-highlight	1400ms	骨架屏高亮动画时长
--cd-animation-function-skeleton-highlight	ease	骨架屏高亮动画曲线

显示第 1 条-第 2 条，共 2 条

• 1