The v-toolbar component is pivotal to any gui, as it generally is the primary source of site navigation. The toolbar component works great in conjunction with v-navigation-drawer and v-card.
Une barre d'outils est un conteneur flexible qui peut être utilisé de plusieurs façons. Par défaut, la barre d'outils est de 64 px haut sur le bureau et 56px haut sur le mobile. Il y a un certain nombre de composants d'aide disponibles avec la barre d'outils. La barre d'outils v-title est utilisée pour afficher un titre et v-toolbar-items permet de dépasser la hauteur totale de v-btn.
When <v-btn>s with the icon prop are used inside of v-toolbar and v-app-bar they will automatically have their size increased and negative margin applied to ensure proper spacing according to the Material Design Specification. If you choose to wrap your buttons in any container, such as a <div>, you will need to apply negative margin to that container in order to properly align them.
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.
Prominent toolbars increase the v-toolbar's height to 128px and positions the v-toolbar-title towards the bottom of the container. This is expanded upon in v-app with the ability to shrink a prominent toolbar to a dense or short one.
Dense toolbars reduce their height to 48px. When using in conjunction with the prominent prop, will reduce height to 96px.
Toolbars come in 2 variants, light and dark. Light toolbars have dark tinted buttons and dark text whereas dark toolbars have white tinted buttons and white text.
A v-toolbar has multiple variations that can be applied with themes and helper classes. These range from light and dark themes, colored and transparent.
Toolbars can display a background as opposed to a solid color. This can be modified by using the img slot and providing your own v-img component. Backgrounds can be faded using a v-app-bar.
Toolbars can be extended without using the extension slot.
La hauteur de l'extension peut être personnalisée.
Toolbars can be collapsed to save screen space.
In this example we offset our card onto the extended content area of a toolbar using the extended prop.
A floating toolbar is turned into an inline element that only takes up as much space as needed. This is particularly useful when placing toolbars over content.
It is possible to update the appearance of a toolbar in response to changes in app state. In this example, the color and content of the toolbar changes in response to user selections in the v-select.
Prêt pour plus ? Continuez la lecture avec :