SusSkeletonLoader

内容加载时的占位闪烁效果 —— 形状类型与动画。

包

SusKit · 原子（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
Type	Prop<string>	"text"	v-model
Animation	Prop<string>	"pulse"	v-model
Width	Prop<float>	-1f	v-model
Height	Prop<float>	-1f	v-model

插槽

名称
（默认）

事件

没有公开事件。

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• sus-skeleton-loader
• sus-skeleton-loader__bar
• sus-skeleton-loader--actions
• sus-skeleton-loader--avatar
• sus-skeleton-loader--card
• sus-skeleton-loader--custom
• sus-skeleton-loader--heading
• sus-skeleton-loader--no-animation
• sus-skeleton-loader--paragraph
• sus-skeleton-loader--pulse
• sus-skeleton-loader--table
• sus-skeleton-loader--text
• sus-skeleton-loader--wave

用法

<template>
  <sus:SusSkeletonLoader Type="text"
                         Animation="pulse"
                         Width="240"
                         Height="16" />
</template>

var skel = new SusSkeletonLoader();
skel.Type.Value = "avatar";
skel.Animation.Value = "wave";
skel.Width.Value = 48f;
skel.Height.Value = 48f;

类型

text · heading · avatar · card · paragraph · table · actions · custom

动画

pulse · wave · none

备注

• 默认插槽可以包裹加载完成后要展示的真实内容。
• Width / Height 为 -1 时保持该类型的固有尺寸。