mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-03-13 15:57:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(docs): [skeleton] fix layout error in example (#17291)

Browse Source
This commit is contained in:
xion 2024-07-20 11:27:46 +08:00 committed by GitHub
parent ab494bb48a
commit 0f8684310b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
docs/examples/skeleton/rendering-with-data.vue
View File

@ -1,22 +1,31 @@
<template>
<el-space direction="vertical" alignment="flex-start">
<el-button @click="setLoading">Click me to reload</el-button>
<el-skeleton style="width: 240px" :loading="loading" animated :count="3">
<el-space style="width: 100%" fill>
<div>
<el-button @click="setLoading">Click me to reload</el-button>
</div>
<el-skeleton
style="display: flex; gap: 8px"
:loading="loading"
animated
:count="3"
>
<template #template>
<el-skeleton-item variant="image" style="width: 400px; height: 267px" />
<div style="padding: 14px">
<el-skeleton-item variant="h3" style="width: 50%" />
<div
style="
display: flex;
align-items: center;
justify-items: space-between;
margin-top: 16px;
height: 16px;
"
>
<el-skeleton-item variant="text" style="margin-right: 16px" />
<el-skeleton-item variant="text" style="width: 30%" />
<div style="flex: 1">
<el-skeleton-item variant="image" style="height: 240px" />
<div style="padding: 14px">
<el-skeleton-item variant="h3" style="width: 50%" />
<div
style="
display: flex;
align-items: center;
justify-items: space-between;
margin-top: 16px;
height: 16px;
"
>
<el-skeleton-item variant="text" style="margin-right: 16px" />
<el-skeleton-item variant="text" style="width: 30%" />
</div>
</div>
</div>
</template>
@ -26,7 +35,11 @@
:key="item.name"
:body-style="{ padding: '0px', marginBottom: '1px' }"
>
<img :src="item.imgUrl" class="image multi-content" />
<img
:src="item.imgUrl"
class="image multi-content"
style="max-width: 100%"
/>
<div style="padding: 14px">
<span>{{ item.name }}</span>
<div class="bottom card-header">