v-app-bar
组件对于任何图形用户界面 (GUI) 都是至关重要的,因为它通常是网站导航的主要来源。app-bar 和 v-navigation-drawer 结合在一起为应用程序提供站点导航。
当在 v-toolbar
和 v-app-bar
内部使用带有 icon 属性的 <v-btn>
时,它们的大小会自动增加,并且会使用负边距来确保适当的间距以遵守 Material Design Specification。如果您选择将按钮包装在任何容器中,例如<div>
,则需要对该容器应用负边距以正确对齐它们。
下面是一些简单到复杂的例子。
你可以使 app-bar 密集。 密集的应用栏的高度低于常规应用栏
当用户向下滚动时,带有 prominent
属性的 v-app-bar
可以选择缩小其高度。这提供了一个平滑的过渡,当用户滚动内容时占用更少的视觉空间。缩小高度有两个选项,dense (48px) 和 short (56px)。
v-app-bar
可以包含背景图像。你可以通过 src
设置源文件。如果你需要自定义 v-img
属性,应用程序栏会提供一个 img 插槽。
v-app-bar
可以在滚动中隐藏。为此使用 hide-on-scroll
属性。
使用 collapse 和 collapse-on-scroll 属性可以可以轻松控制用户与之交互的工具栏的状态。
当使用 elevate-on-scroll 属性时,v-app-bar
将停留在 0dp 的高度,直到用户开始向下滚动。 滚动后,该条会升至 4dp。
使用 inverted-scroll 属性时,该条将一直隐藏,直到用户滚动超过指定的阈值为止。 一旦超过阈值,v-app-bar
将继续显示,直到用户向上滚动超过阈值为止。 如果未提供 scroll-threshold 值,则将使用默认值 0。
使用功能组件 v-app-bar-nav-icon
可以切换其他组件的状态,比如 v-navigation-drawer。
v-app-bar
可以有滚动阀值。只有在通过 scroll-threshold
属性定义的像素数量之后,它才会开始对滚动进行反应。
v-app-bar
的背景图像可以在滚动时淡入淡出。为此使用 fade-img-on-scroll
属性。
你可以通过添加 VMenu
来轻松扩展 app bar 的功能。点击最后一个图标,看看它的动作。