ショップ

企業向け

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 条件を使用できます。

By default, the v-skeleton-loader component is assigned a WAI-ARIA role of alert. We augment this role with two aria properties. An aria-busy value of true denotes that a widget is missing required owned elements. An aria-live value of polite sets the screen reader's priority of live regions.

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

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