Vuetify

商店

企业版

v-app-bar 组件对于任何图形用户界面 (GUI) 都是至关重要的,因为它通常是网站导航的主要来源。app-bar 和 v-navigation-drawer 结合在一起为应用程序提供站点导航。

v-app-bar 组件用于应用程序范围内的操作和信息。

Options
  • v-app-bar-nav-icon:专门为 v-toolbarv-app-bar 创建的图标按钮组件。通常作为汉堡包菜单出现在工具栏的左侧,它通常用于控制导航抽屉的状态。default 插槽可以用来定制这个组件的图标和功能。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

你可以使 app-bar 密集。 密集的应用栏的高度低于常规应用栏

当用户向下滚动时,带有 prominent 属性的 v-app-bar 可以选择缩小其高度。这提供了一个平滑的过渡,当用户滚动内容时占用更少的视觉空间。缩小高度有两个选项,dense (48px) 和 short (56px)。

v-app-bar 可以包含背景图像。你可以通过 src 设置源文件。如果你需要自定义 v-img 属性,应用程序栏会提供一个 img 插槽。

v-app-bar 可以在滚动中隐藏。为此使用 hide-on-scroll 属性。

使用 collapsecollapse-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 的功能。点击最后一个图标,看看它的动作。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!