🤍

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

2022/03/20に公開約4,600字

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

ログインするとコメントできます