Breakpoints

Vuetify convertit les breakpoints disponibles en un objet accessible depuis votre application. Cela vous permettra d'assigner / d'appliquer des propriétés et des attributs spécifiques en fonction de la taille de la fenêtre d'affichage. L'objet est disponible par $vuetify.breakpoint.

Vous pouvez définir vos propres seuils de breakpoints en pixels, mais il s'agit actuellement d'un processus en deux étapes : 1. Pour mettre à jour les styles, vous devez remplacer les variables SASS $grid-breakpoints (veuillez consulter SASS variables). 2. Pour utiliser les mêmes valeurs du côté JavaScript, vous devez les transmettre lors du bootstrap de l'application, de la manière suivante :

Essayons un exemple réel. Vous avez un composant v-dialog que vous souhaitez convertir en dialogue plein écran sur les appareils mobiles. Normalement, vous devez lier des observateurs pour la taille de la fenêtre et / ou vérifier chaque fois que la page est chargée.

Cela fait beaucoup de boilerplate à écrire. Même si vous choisissez d'utiliser la directive intégrée v-resize, vous devrez toujours définir une méthode de redimensionnement. Avec l'objet breakpoint, vous pouvez complètement ignorer cette logique et reprendre la construction de votre application.

We can simplify this process by simply checking the value of the mobile property on the $vuetify.breakpoint object.