Skeleton 骨架屏
在需要等待加载内容的位置设置一个骨架屏,某些场景下比 Loading 的视觉效果更好。
引入
js
js
<script type="module">
import "./node_modules/easy-component-ui/components/ea-skeleton/index.js";
</script>
css
TIP
需要注意的是, 如果需要使用到带有图标的 属性/组件
, 需要提前使用 link
标签引入图标文件
html
<link
rel="stylesheet"
href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>
自定义样式
移步到 CSS Part。
基础用法
基础的骨架效果。
查看代码
html
<div class="demo">
<ea-skeleton></ea-skeleton>
</div>
更多参数
可以配置骨架屏段落数量,以便更接近真实渲染效果。首行会被渲染一个长度 33%
的段首。
查看代码
html
<div class="demo">
<ea-skeleton row="6"></ea-skeleton>
</div>
动画效果
通过设置 animated
属性,可以显示动画效果。
查看代码
html
<div class="demo">
<ea-skeleton row="6" animated></ea-skeleton>
</div>
自定义样式
默认提供的排版模式有时候并不满足要求,当您想要用自己定义的模板时,可以通过一个具名 slot="template"
来自己设定模板。
我们提供了不同的模板单元可供使用,具体可选值请看 API-variant 详细描述。 建议在描述模板的时候,尽量靠近真实的 DOM 结构,这样可以避免 DOM 高度差距引起的抖动。
查看代码
html
<div class="demo">
<div style="width: 240px;">
<ea-skeleton animated>
<div slot="template">
<ea-skeleton-item
variant="image"
style="width: 240px; height: 240px"
></ea-skeleton-item>
<div style="padding: 14px">
<ea-skeleton-item variant="p" style="width: 50%;"></ea-skeleton-item>
<ea-skeleton-item
variant="text"
style="margin-right: 16px;"
></ea-skeleton-item>
<ea-skeleton-item
variant="text"
style="width: 30%;"
></ea-skeleton-item>
</div>
</div>
</ea-skeleton>
</div>
</div>
Loading 状态
切换 Loading 状态
Hello World!
Hello World! Hello World!
Hello!
查看代码
html
html
<p class="align-center">
切换 Loading 状态
<ea-switch id="handleLoadingStatusSwitch" checked></ea-switch>
</p>
<div>
<div style="width: 240px;">
<ea-skeleton id="loadingStatusNodeWrap" animated>
<div slot="template">
<ea-skeleton-item
variant="image"
style="width: 240px; height: 240px"
></ea-skeleton-item>
<div style="padding: 14px">
<ea-skeleton-item variant="p" style="width: 50%;"></ea-skeleton-item>
<ea-skeleton-item
variant="text"
style="margin-right: 16px;"
></ea-skeleton-item>
<ea-skeleton-item
variant="text"
style="width: 30%;"
></ea-skeleton-item>
</div>
</div>
<div>
<ea-avatar
size="240"
shape="square"
src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
></ea-avatar>
<div style="padding: 14px">
<div>Hello World!</div>
<div>Hello World! Hello World!</div>
<div>Hello!</div>
</div>
</div>
</ea-skeleton>
</div>
</div>
js
js
document
.querySelector("#handleLoadingStatusSwitch")
.addEventListener("change", (e) => {
const isChecked = e.detail.checked;
const wrap = document.querySelector("#loadingStatusNodeWrap");
wrap.loading = isChecked;
});
渲染多条数据
大多时候, 骨架屏都被用来渲染列表, 当我们需要在从服务器获取数据的时候来渲染一个假的 UI
。利用 count
这个属性就能控制渲染多少条假的数据在页面上
WARNING
请注意, 请尽可能的将 count
的大小保持在最小状态, 即使是假的 UI
, DOM
元素多了之后, 照样会引起性能问题。
切换 Loading 状态
牛马
这是一只牛马
吗喽
这是一只吗喽
查看代码
html
<div style="width: 240px;">
<ea-skeleton id="multipleLoadingStatusNodeWrap" animated count="2">
<div slot="template">
<ea-skeleton-item
variant="image"
style="width: 240px; height: 240px"
></ea-skeleton-item>
<div style="padding: 14px">
<ea-skeleton-item variant="p" style="width: 50%;"></ea-skeleton-item>
<ea-skeleton-item
variant="text"
style="margin-right: 16px;"
></ea-skeleton-item>
</div>
</div>
<div>
<ea-avatar
size="240"
shape="square"
src="https://b0.bdstatic.com/2bb3119a584a173526df6da5ee42754b.jpg@h_1280"
></ea-avatar>
<div style="padding: 14px">
<div>牛马</div>
<div style="font-size: 12px; color: gray;">这是一只牛马</div>
</div>
</div>
<div>
<ea-avatar
size="240"
shape="square"
src="https://pic4.zhimg.com/v2-c2bdf8d900f904e7ff1f3e7d7cdc665b_r.jpg"
></ea-avatar>
<div style="padding: 14px">
<div>吗喽</div>
<div style="font-size: 12px; color: gray;">这是一只吗喽</div>
</div>
</div>
</ea-skeleton>
</div>
Skeleton Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
animated | 是否开启动画 | Boolean | - | false |
count | 渲染的骨架屏个数 | Number | - | 1 |
loading | 是否显示骨架屏 | Boolean | - | true |
rows | 段落占位图行数 | Number | - | 4 |
Skeleton Item Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
variant | 占位图类型 | String | image , p , text , h1 , h2 , h3 , h4 , h5 , h6 | text |
Skeleton CSS Part
用法可参考 MDN ::part()伪类
名称 | 说明 |
---|---|
container | 外层容器 |
SkeletonItem CSS Part
名称 | 说明 |
---|---|
container | 外层容器 |
Skeleton Slots
名称 | 说明 |
---|---|
- | 骨架屏内容, 非具名插槽 |
template | 骨架屏模板 |