应用栏 (App bars)
v-app-bar 组件对于任何图形用户界面（GUI）都至关重要，因为它通常是站点导航的主要来源。
使用
v-app-bar 组件用于提供应用程序范围内的操作和信息。
API
| 组件 | 描述 |
|---|---|
| v-app-bar | 主要组件 |
| v-app-bar-nav-icon | 一个使用 $menu 的值作为 icon 的默认值的自定义 v-btn 组件。 |
| v-app-bar-title | v-toolbar-title 的升级版，会根据页面滚动调整 |
TIP
App-bar组件与 <a href=“/components/navigation drawers”> v-navigation-drawer 配合使用，可以在应用程序中提供站点导航。
组件结构
v-app-bar 中元素的推荐放置是：
- 将
v-app-bar-nav-icon或者其他导航物件放置于最左面 - 将
v-app-bar-title放置于导航按钮的右边 - 将相关动作放置于标题的右边
- 将全局动作置于最右边
| 元素 / 区域 | 描述 |
|---|---|
| 1. 容器 | 应用栏容器用于包含所有的 v-app-bar 组件。 |
| 2. 应用图标（可选） | 某个图标按钮组件，通常用于控制 v-navigation drawer 的状态。 |
| 3. 标题（可选） | 拥有稍微大一点的 font-size 的标题 |
| 4. 动作部件（可选） | 用于强调一些不再全局菜单中的动作 |
| 5. 全局菜单（可选） | 在一个隐藏菜单中放置一些不常用的动作 |
WARNING
当在 v-toolbar 和 v-app-bar 中使用带有 icon 属性的 v-btn 时，它们的大小会自动增加，并应用负外边距以确保根据 Material Design 规范进行适当的间距。如果选择将按钮包裹在任何容器中（例如 `div），则需要对该容器应用负外边距，以便正确对齐它们。
示例
以下是一组示例，演示了 v-app-bar 组件的更高级和实际使用。
属性
v-app-bar 组件具有各种属性，可让您自定义其外观、密度、滚动行为等。
应用栏的滚动行为
可用的值:
- hide: 默认插槽内容会随用户向下滚动而隐藏。而 extension 插槽则会保留。
- collapse: 会在角落收缩成一团。
- elevate: 当向下滚动时，会在应用栏添加阴影效果。忽略
scroll-threshold属性，任意的滚动都会添加阴影。 - fade-image: 背景图片会随着滚动条下拉而渐隐。
- inverted: 没有任何的效果，但会倒转上面提到的效果。
scroll-threshold 属性（单位是像素）决定了滚动条需要向下滚动多少才有应用栏的滚动效果。
默认是通过向 window 增加事件监听器实现的，但你可以通过修改 scroll-target 属性变更它的作用目标。
间距 (Density)
你可以使 app-bar 减小高度。紧凑的应用栏的高度会比常规的更小。
图像 (Images)
v-app-bar 可以包含背景图像。您可以通过 image 属性设置源。如果您需要自定义 image 属性，应用程序栏为您提供了一个image插槽。
突出
带有 density="prominent" 属性的 v-app-bar 可以选择在用户向下滚动时缩小其高度。当用户滚动内容时，这提供了平滑过渡以占用更少的视觉空间。收缩高度有 2 个可能的选项，compact（48 px）和 comfortable （56 像素）尺寸。