
Skeleton 骨架屏
在需要等待加载内容的位置提供一个占位图形组合
何时使用
- 网络较慢,需要长时间等待加载处理的情况下
- 图文信息内容较多的列表/卡片中
- 只在第一次加载数据的时候使用
- 可以被 Spin 完全代替,但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验
图片骨架屏
适用于头像、图片等类型加载时显示
Demo
通过设置 Circle
属性可以设置为圆形显示
段落骨架屏
适用于大段文字等类型加载时显示
Demo
默认段落骨架屏仅显示三行,如果需要多行占位,请放置多个 SkeletonParagraph
即可
表单骨架屏
适用于编辑表单加载时显示
Demo
表格骨架屏
适用于编辑表格加载时显示
Demo
@page "/skeletons"
<h3>Skeleton 骨架屏</h3>
<h4>在需要等待加载内容的位置提供一个占位图形组合</h4>
<p><b>何时使用</b></p>
<ul class="ul-demo">
<li>网络较慢,需要长时间等待加载处理的情况下</li>
<li>图文信息内容较多的列表/卡片中</li>
<li>只在第一次加载数据的时候使用</li>
<li>可以被 Spin 完全代替,但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验</li>
</ul>
<Block Title="图片骨架屏" Introduction="适用于头像、图片等类型加载时显示">
<p>通过设置 <code>Circle</code> 属性可以设置为圆形显示</p>
<div class="form-inline">
<div class="form-row skeleton-demo">
<div class="form-group col-4">
<SkeletonAvatar Round="false" />
</div>
<div class="form-group col-4">
<SkeletonAvatar />
</div>
<div class="form-group col-4">
<SkeletonAvatar Circle="true" />
</div>
</div>
</div>
</Block>
<Block Title="段落骨架屏" Introduction="适用于大段文字等类型加载时显示">
<p>默认段落骨架屏仅显示三行,如果需要多行占位,请放置多个 <code>SkeletonParagraph</code> 即可</p>
<SkeletonParagraph />
</Block>
<Block Title="表单骨架屏" Introduction="适用于编辑表单加载时显示">
<SkeletonEditor />
</Block>
<Block Title="表格骨架屏" Introduction="适用于编辑表格加载时显示">
<SkeletonTable />
</Block>
无