Vue-content-loaderを使用したVue.jsでのコンテンツプレースホルダーの表示
まだ気付いていないかもしれませんが、いくつかの主要なアプリは、無期限の読み込みサークルインジケーターパラダイムから移行しています(たとえば、5倍高速です)。 なんで? 何もないよりはましですが、それでもユーザーはコンテンツが読み込まれるのを待ちきれません。 では、代わりに何を使用しますか? プレースホルダーを読み込んでいます。 それらは通常、意図されたコンテンツのおおよその形をした低コントラストのブロックであり、アニメーション化されることもあります。 Slack、Instagram、さらにはFacebookでそのような要素に気づいたことでしょう。 自分で作成する方法のガイドを作成しましたが、そのような要素を提供できる優れたVue.jsコンポーネントがあります:vue-content-loader
。
依存関係
このガイドは、Vue.jsプロジェクトがすでに設定されていることを前提としています。 そうでない場合は、先に進み、 vue-cli3.0とデフォルトのオプションを使用して新しいVueプロジェクトを開始します。 $ vue create my-new-project
を実行し、Enterキーを数回押すだけで十分です。
次に、npmからvue-content-loader
をインストールします。
$ npm install vue-content-loader
注:これはプラグインではなくコンポーネントであるため、ここでmain.js
で何も有効にする必要はありません。
使用法
<template> <div class="content-wrapper"> <!-- Displays if myData is not set. Options speed: Number - How many seconds between pulses of the loader. height / width: Number - size of the loader contents. primaryColor: String - The color of the elements. secondaryColor: String - The color of the pulser. animate: Boolean - Whether or not to display the pulser. --> <content-loader v-if="!myData" :speed="2" :animate="true" ></content-loader> <div v-else class="my-real-content"> <!-- Your real loaded data goes in here. --> <p>{{myData}}</p> </div> </div> </template> <script> import { ContentLoader } from 'vue-content-loader'; export default { components: { ContentLoader }, data() { return { myData: null } }, mounted() { // Just pretend this is an AJAX call. Use your imagination. setTimeout(() => { this.myData = 'Example Data'; }, 5000); } } </script>
まあ、それは圧倒的です。 ほんの少し退屈な正方形。 :/ ContentLoader
コンポーネントは、実際には独自のカスタムローダーSVG要素のラッパーであると想定されています。 何?!あなたは悲鳴を上げます。 コンテンツローダー用に自分のSVGSを作成する必要がありますか?
うーん、はい! あなたのためにコードを生成する豪華なオンラインGUIツールがあります! 悪くない、全く!
これが私がその発電機を使って作ったかわいい小さな車の形をしたものです:(ワニを作ろうとしましたが、必要なスキルと細かい運動制御が不足しています)。
<content-loader> <circle cx="333.40099117860757" cy="371.67099117860755" r="45.40099117860754"/> <circle cx="132.26035793053342" cy="377.5303579305334" r="45.260357930533424"/> <circle cx="289.53897688809354" cy="305.8089768880935" r="54.53897688809353"/> <rect x="80.04" y="312.09" rx="0" ry="0" width="324" height="66" transform="rotate(0.06, 80.04, 312.09)"/> <circle cx="163.7954915950234" cy="303.06549159502345" r="48.79549159502341"/> <rect x="159.7" y="255.09" rx="0" ry="0" width="131" height="64" transform="rotate(357.56, 159.7, 255.09)"/> </content-loader>
まだ努力が多すぎますか? vue-content-loader
には、次のような多くの組み込みスタイルが付属しています。
フェイスブック
銃弾
コード
リスト
インスタグラム
これらは、vue-content-loader
から直接インポートし、content-loader
コンポーネントの代わりに使用するだけで使用できます。
<template> <div class="content-wrapper"> <!-- Displays if myData is not set. --> <facebook-loader v-if="!myData" :speed="2" ></facebook-loader> <div v-else class="my-real-content"> <!-- Your real loaded data goes in here. --> <p>{{myData}}</p> </div> </div> </template> <script> import { FacebookLoader } from 'vue-content-loader'; // Or: InstagramLoader | CodeLoader | ListLoader | BulletListLoader export default { components: { FacebookLoader }, data() { return { myData: null } }, mounted() { // Just pretend this is an AJAX call. Use your imagination. setTimeout(() => { this.myData = 'Example Data'; }, 5000); } } </script>