Vuetify

ショップ

企業向け

v-skeleton-loaderコンポーネントは、プロジェクト内の多くの役割を満たすことができる汎用性の高いツールです。このコンポーネントは、何かがまだ利用できないことをユーザーに示します。 30を超える事前定義されたオプションがあり、これらを組み合わせてカスタムできます。

v-skeleton-loader コンポーネントは、コンテンツがロードされていることを視覚的に表示します。これは、従来のフルスクリーンローダーよりも好評です。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

v-skeleton-loaderは、モックアップを作成する際の定型的なデザインとして使用できます。さまざまな定義済みオプションを組み合わせて使用​​するか、独自の実装を作成します。この例では、機能的なボイラープレートコンポーネントとして使用するために、v-skeleton-loaderを新しいコンポーネントv-boilerplateとして拡張しています。

v-skeleton-componentを利用する方法は 2 つあります。既定のスロットまたは v-if条件です。組み込みスロットは最も便利で使いやすいですが、レンダリングされると余分な div が生成されます。追加の div がセットアップで問題になる場合は、Vuetifyの トランジションコンポーネント またはカスタムのコンポーネントを使用して v-if 条件を使用できます。

デフォルトでは、v-skeleton-loader コンポーネントには WAI-ARIAalert のロールが割り当てられています。このロールを2つのariaプロパティで拡張します。aria-busy の値が true の場合、必要な所有要素がウィジェットにないことを示します。 aria-live の値 polite は、ライブリージョンのスクリーンリーダーの優先度を設定します。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!