The v-skeleton-loader component is a versatile tool that can fill many roles within a project. At its heart, the component provides an indication to the user that something is coming but not yet available. There are over 30 pre-defined options available that can be combined to make custom examples.
Le composant v-skeleton-loader fournit à un utilisateur un indicateur visuel indiquant que le contenu arrive/charge. Cette solution est mieux accueillie que les chargeurs traditionnels en plein écran.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
The v-skeleton-loader can be used as boilerplate designs when creating mockups. Mix and match various pre-defined options or create your own unique implementations. In this example, we are extending the v-skeleton-loader into a new component called v-boilerplate for use as a functional boilerplate component.
There are 2 ways that you can utilize the v-skeleton-component. The default slot or a v-if conditional. The built in slot is the most convenient and easiest to use, but generates an extra div once rendered. If the extra div is an issue in your setup, you can utilize a v-if conditional with a Vuetify transition component or a custom one.
Par défaut, le composant v-skeleton-loader est assigné à un WAI-ARIA rôle de alert. Nous augmentons ce rôle avec deux propriétés aria. Un aria-busy valeur de true indique qu'un widget manque d'éléments appartenant à l'utilisateur. Un aria-live de polite définit la priorité du lecteur d'écran des régions en direct.
Prêt pour plus ? Continuez la lecture avec :