Skeleton

コンテンツ読み込み中のプレースホルダー表示です。

コード例

Real content loaded successfully! 🎉

Show Content

スケルトン

アバター・タイトル・段落行に対応。ボタンで読み込み状態を切り替え可能

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

<!-- 読み込み状態の切り替え -->
<m-skeleton :loading="loading" row="2" title>
  <div>Real content loaded!</div>
</m-skeleton>
<m-button @click="loading = !loading">Toggle</m-button>

API

プロパティ

属性	说明	类型	默认值
row	段落行数	number	3
row-width	各行の幅（カンマ区切り）	string	-
title	タイトル用プレースホルダーを表示するか	boolean	false
avatar	アバター用プレースホルダーを表示するか	boolean	false
avatar-shape	アバターの形状	round | square	round
loading	スケルトンを表示するか	boolean	true
animate	シマーアニメーションを有効にするか	boolean	false