Shimmer-DEMO

---

Avatar with item

<fv-Shimmer style="height: auto;">
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div v-for="(item, index) in 5" :key="index" style="margin-top: 5px; display: flex; align-items: center;">
            <div class="sample" style="width: 35px; height: 35px; border-radius: 50%;"></div>
            <div class="sample" style="width: 80%; margin-left: 15px;"></div>
        </div>
    </div>
</fv-Shimmer>

List items

<fv-Shimmer style="height: auto;">
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div v-for="(item, index) in 3" :key="index" style="margin-top: 5px; display: flex; align-items: center;">
            <div class="sample" style="width: 80%; height: 15px;" :style="{width: `${100 - index * 10}%`}"></div>
        </div>
    </div>
</fv-Shimmer>

List items with two column

<fv-Shimmer style="height: auto;">
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div v-for="(item, index) in 3" :key="index" style="margin-top: 5px; display: flex; align-items: center;">
            <div class="sample" style="width: 80%; height: 15px;" :style="{width: `${50 - index * 10}%`}"></div>
            <div class="sample" style="width: 80%; height: 15px; margin-left: 15px;" :style="{width: `${50 - index * 10}%`}"></div>
        </div>
    </div>
</fv-Shimmer>

Shimmer-Dark Theme

---

Avatar with item

<fv-Shimmer theme="dark" style="height: auto;">
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div v-for="(item, index) in 5" :key="index" style="margin-top: 5px; display: flex; align-items: center;">
            <div class="sample" style="width: 35px; height: 35px; border-radius: 50%;"></div>
            <div class="sample" style="width: 80%; margin-left: 15px;"></div>
        </div>
    </div>
</fv-Shimmer>

List items

<fv-Shimmer theme="dark" style="height: auto;">
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div v-for="(item, index) in 3" :key="index" style="margin-top: 5px; display: flex; align-items: center;">
            <div class="sample" style="width: 80%; height: 15px;" :style="{width: `${100 - index * 10}%`}"></div>
        </div>
    </div>
</fv-Shimmer>

List items with two column

<fv-Shimmer theme="dark" style="height: auto;">
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div v-for="(item, index) in 3" :key="index" style="margin-top: 5px; display: flex; align-items: center;">
            <div class="sample" style="width: 80%; height: 15px;" :style="{width: `${50 - index * 10}%`}"></div>
            <div class="sample" style="width: 80%; height: 15px; margin-left: 15px;" :style="{width: `${50 - index * 10}%`}"></div>
        </div>
    </div>
</fv-Shimmer>

Propoties

---

属性(attr)	类型(type)	必填(required)	默认值(default)	说明(statement)
theme	String	No	system	主题样式, 包含light, dark, system, custom几种样式

Slot

---

1. Default

默认样式为:

<div class="sample"></div>

自定义Shimmer内容时, 将要呈现Skeleton效果的元素加上sample类.

<fv-shimmer>
    <div class="sample"></div>
</fv-shimmer>