🤍

Vuetifyのスケルトンローダー全種類まとめてみた【2022/03/21版】

に公開
Nuxt
Vue.js
Vuetify
tech

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>

参考

https://vuetifyjs.com/ja/components/skeleton-loaders/
https://vuetifyjs.com/ja/api/v-skeleton-loader/

Discussion