Skeleton

Placeholder layout while content is loading.

Code examples

Real content loaded successfully! 🎉

Show Content

Skeleton

Avatar, title, and paragraph rows; use the button to toggle loading state

<m-skeleton row="3" title avatar />
<m-skeleton row="2" avatar avatar-shape="square" row-width="100%, 60%" />

<!-- Toggle loading state -->
<m-skeleton :loading="loading" row="2" title>
  <div>Real content loaded!</div>
</m-skeleton>
<m-button @click="loading = !loading">Toggle</m-button>

API

Props

属性	说明	类型	默认值
row	Number of paragraph rows	number	3
row-width	Width per row (comma-separated)	string	-
title	Show title placeholder	boolean	false
avatar	Show avatar placeholder	boolean	false
avatar-shape	Avatar shape	round | square	round
loading	Whether to show the skeleton	boolean	true
animate	Enable shimmer animation	boolean	false