🤍
Vuetifyのスケルトンローダー全種類まとめてみた【2022/03/21版】
Vuetifyで提供されているスケルトンローダーを全種類まとめてみました。
【2022/03/21】時点の一覧になります。
どんな方に向けた記事？
- Vuetifyのスケルトンローダーを使おうとしているが、どんな種類があるか知りたい方
スケルトンローダーの使い方
「type」 propsに使いたいスケルトンローダーを指定するだけ
<template>
<v-skeleton-loader type="ここに使いたいスケルトンローダーを指定" />
</template>
typeごとのスケルトンローダー
動作確認環境
- nuxt: 2.15.7,
- vuetify: 2.5.5,
actions
article
avatar
button
card
card-avatar
card-heading
chip
date-picker
date-picker-options
date-picker-days
heading
image
list-item
list-item-avatar
list-item-two-line
list-item-avatar-two-line
list-item-three-line
list-item-avatar-three-line
paragraph
sentences
table
table-heading
table-thead
table-tbody
table-row-divider
table-row
table-cell
table-tfoot
text
全種のスケルトンローダーを出力するコード
お使いの環境に貼り付けて動作確認ください。
<template>
<div>
<div v-for="(type, i) in typeList" :key="i">
{{ type }}
<v-skeleton-loader class="my-10" :type="type" />
<v-divider />
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
typeList: [
"actions",
"article",
"avatar",
"button",
"card",
"card-avatar",
"card-heading",
"chip",
"date-picker",
"date-picker-options",
"date-picker-days",
"heading",
"image",
"list-item",
"list-item-avatar",
"list-item-two-line",
"list-item-avatar-two-line",
"list-item-three-line",
"list-item-avatar-three-line",
"paragraph",
"sentences",
"table",
"table-heading",
"table-thead",
"table-tbody",
"table-row-divider",
"table-row",
"table-cell",
"table-tfoot",
"text",
],
};
},
};
</script>
参考
Discussion