In Vuetify, the v-app component and the app prop on components like v-navigation-drawer, v-app-bar, v-footer and more, help bootstrap your application with the proper sizing around <v-main> component. This allows you to create truly unique interfaces without the hassle of managing your layout sizing. The v-app component is REQUIRED for all applications. This is the mount point for many of Vuetify's components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be rendered within your application ONCE. If you are using multiple layouts in your application you will need to ensure each root layout file that will contain Vuetify components has a v-app at the root of its template.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
In order for your application to work properly, you must wrap it in a v-app component. This component is required for ensuring proper cross-browser compatibility. Vuetify doesn't support multiple isolated Vuetify instances on a page. v-app can exist anywhere inside the body of your app, however, there should only be one and it must be the parent of ALL Vuetify components.
This is an example of the default application markup for Vuetify. You can place your layout elements anywhere, as long as you apply the app property. The key component in all of this is v-main. This will be dynamically sized depending upon the structure of your designated app components. You can use combinations of any or all of the above components including v-bottom-navigation.
En utilisant vue-router il est recommandé de placer vos vues dans v-main.
Applying the app prop automatically applies position: fixed to the layout element. If your application calls for an absolute element, you can overwrite this functionality by using the absolute prop.
Voici une liste de tous les composants qui supportent le prop app et peuvent être utilisés comme éléments de mise en page dans votre application. Ils peuvent être mélangés et correspondants et seulement un de chaque composant particulier devrait exister à tout moment. Vous pouvez cependant les échanger et la mise en page sera adaptée. Pour certains exemples montrant comment vous pouvez construire diverses mises en page, cochez la page Pré-mises en page.
Each of these application components have a designated location and priority that it affects within the layout system.
- v-system-bar: est toujours placé en haut d'une application avec une priorité supérieure à
v-app-bar. - v-app-bar: est toujours placé en haut d'une application avec une priorité inférieure à
v-system-bar. - v-navigation-drawer: Peut être placé sur la gauche ou la droite d'une application et peut être configuré pour s'asseoir à côté ou en dessous de
v-app-bar. - v-footer: est toujours placé en bas d'une application avec une priorité inférieure à
v-bottom-navigation. - v-bottom-navigation: Est toujours placé en bas d'une application avec une priorité supérieure à
v-footer.
En résumé, cela signifie que v-system-bar est toujours au-dessus de v-app-bar, v-navigation-drawer peut occuper le côté gauche ou à droite et v-footer se trouve toujours en haut de v-bottom-navigation.
Vuetify Application
Le service d'application est utilisé pour configurer votre disposition Vuetify. Il communique avec le composant v-main afin qu'il puisse correctement dimensionner le contenu de l'application. Il possède un certain nombre de propriétés qui peuvent être accessibles :
Ces valeurs sont automatiquement mises à jour lorsque vous ajoutez et supprimez des composants avec le prop app . Elles sont PAS modifiables et existent dans un état READONLY. Vous pouvez accéder à ces valeurs en référençant la propriété de l'application sur l'objet $vuetify.
Par défaut, v-main est assignée au TR tag qui dénote que c'est la démontre zone de contenu principale du body d'un document ou d'une application.
Prêt pour plus ? Continuez la lecture avec :