应用栏

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

用例

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

App bars（应用栏） - 图1

当在 v-toolbar 和 v-app-bar 内部使用带有 icon 属性的 <v-btn> 时，它们的大小会自动增加，并且会使用负边距来确保适当的间距以遵守 Material Design Specification。如果您选择将按钮包装在任何容器中，例如<div>，则需要对该容器应用负边距以正确对齐它们。

函数组件

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

API

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

App bars（应用栏） - 图2

示例

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

密集

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

template

  1. <template>
  2.   <div>
  3.     <v-app-bar
  4.       color="deep-purple accent-4"
  5.       dense
  6.       dark
  7.     >
  8.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  10.       <v-toolbar-title>Page title</v-toolbar-title>
  12.       <v-spacer></v-spacer>
  14.       <v-btn icon>
  15.         <v-icon>mdi-heart</v-icon>
  16.       </v-btn>
  18.       <v-btn icon>
  19.         <v-icon>mdi-magnify</v-icon>
  20.       </v-btn>
  22.       <v-menu
  23.         left
  24.         bottom
  25.       >
  26.         <template v-slot:activator="{ on }">
  27.           <v-btn icon v-on="on">
  28.             <v-icon>mdi-dots-vertical</v-icon>
  29.           </v-btn>
  30.         </template>
  32.         <v-list>
  33.           <v-list-item
  34.             v-for="n in 5"
  35.             :key="n"
  36.             @click="() => {}"
  37.           >
  38.             <v-list-item-title>Option {{ n }}</v-list-item-title>
  39.           </v-list-item>
  40.         </v-list>
  41.       </v-menu>
  42.     </v-app-bar>
  43.   </div>
  44. </template>

App bars（应用栏） - 图3

Prominent w/ scroll shrink

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

template

  1. <template>
  2.   <v-card class="overflow-hidden">
  3.     <v-app-bar
  4.       absolute
  5.       color="indigo darken-2"
  6.       dark
  7.       shrink-on-scroll
  8.       prominent
  9.       scroll-target="#scrolling-techniques"
  10.     >
  11.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  13.       <v-toolbar-title>Title</v-toolbar-title>
  15.       <v-spacer></v-spacer>
  17.       <v-btn icon>
  18.         <v-icon>mdi-magnify</v-icon>
  19.       </v-btn>
  21.       <v-btn icon>
  22.         <v-icon>mdi-heart</v-icon>
  23.       </v-btn>
  25.       <v-btn icon>
  26.         <v-icon>mdi-dots-vertical</v-icon>
  27.       </v-btn>
  28.     </v-app-bar>
  29.     <v-sheet
  30.       id="scrolling-techniques"
  31.       class="overflow-y-auto"
  32.       max-height="600"
  33.     >
  34.       <v-container style="height: 1000px;"></v-container>
  35.     </v-sheet>
  36.   </v-card>
  37. </template>

App bars（应用栏） - 图4

Prominent w/ scroll shrink and image

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

template

  1. <template>
  2.   <v-card class="overflow-hidden">
  3.     <v-app-bar
  4.       absolute
  5.       color="#fcb69f"
  6.       dark
  7.       shrink-on-scroll
  8.       src="https://picsum.photos/1920/1080?random"
  9.       scroll-target="#scrolling-techniques-2"
  10.     >
  11.       <template v-slot:img="{ props }">
  12.         <v-img
  13.           v-bind="props"
  14.           gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
  15.         ></v-img>
  16.       </template>
  18.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  20.       <v-toolbar-title>Title</v-toolbar-title>
  22.       <v-spacer></v-spacer>
  24.       <v-btn icon>
  25.         <v-icon>mdi-magnify</v-icon>
  26.       </v-btn>
  28.       <v-btn icon>
  29.         <v-icon>mdi-heart</v-icon>
  30.       </v-btn>
  32.       <v-btn icon>
  33.         <v-icon>mdi-dots-vertical</v-icon>
  34.       </v-btn>
  35.     </v-app-bar>
  36.     <v-sheet
  37.       id="scrolling-techniques-2"
  38.       class="overflow-y-auto"
  39.       max-height="600"
  40.     >
  41.       <v-container style="height: 1000px;"></v-container>
  42.     </v-sheet>
  43.   </v-card>
  44. </template>

App bars（应用栏） - 图5

滚动时隐藏

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

template

  1. <template>
  2.   <v-card class="overflow-hidden">
  3.     <v-app-bar
  4.       absolute
  5.       color="teal lighten-3"
  6.       dark
  7.       hide-on-scroll
  8.       prominent
  9.       scroll-target="#scrolling-techniques-4"
  10.     >
  11.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  13.       <v-toolbar-title>Title</v-toolbar-title>
  15.       <v-spacer></v-spacer>
  17.       <v-btn icon>
  18.         <v-icon>mdi-magnify</v-icon>
  19.       </v-btn>
  21.       <v-btn icon>
  22.         <v-icon>mdi-heart</v-icon>
  23.       </v-btn>
  25.       <v-btn icon>
  26.         <v-icon>mdi-dots-vertical</v-icon>
  27.       </v-btn>
  28.     </v-app-bar>
  29.     <v-sheet
  30.       id="scrolling-techniques-4"
  31.       class="overflow-y-auto"
  32.       max-height="600"
  33.     >
  34.       <v-container style="height: 1000px;"></v-container>
  35.     </v-sheet>
  36.   </v-card>
  37. </template>

App bars（应用栏） - 图6

可折叠栏

使用 collapse 和 collapse-on-scroll 属性可以可以轻松控制用户与之交互的工具栏的状态。

template script

  1. <template>
  2.   <v-card class="overflow-hidden">
  3.     <v-app-bar
  4.       :collapse="!collapseOnScroll"
  5.       :collapse-on-scroll="collapseOnScroll"
  6.       absolute
  7.       color="deep-purple accent-4"
  8.       dark
  9.       scroll-target="#scrolling-techniques-6"
  10.     >
  11.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  13.       <v-toolbar-title>Collapsing Bar</v-toolbar-title>
  15.       <v-spacer></v-spacer>
  17.       <v-checkbox
  18.         v-model="collapseOnScroll"
  19.         color="white"
  20.         hide-details
  21.       ></v-checkbox>
  22.     </v-app-bar>
  23.     <v-sheet
  24.       id="scrolling-techniques-6"
  25.       class="overflow-y-auto"
  26.       max-height="600"
  27.     >
  28.       <v-container style="height: 1000px;"></v-container>
  29.     </v-sheet>
  30.   </v-card>
  31. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       collapseOnScroll: true,
  5.     }),
  6.   }
  7. </script>

App bars（应用栏） - 图7

滚动时升高栏

当使用 elevate-on-scroll 属性时，v-app-bar 将停留在 0dp 的高度，直到用户开始向下滚动。 滚动后，该条会升至 4dp。

template

  1. <template>
  2.   <v-card class="overflow-hidden">
  3.     <v-app-bar
  4.       absolute
  5.       color="white"
  6.       elevate-on-scroll
  7.       scroll-target="#scrolling-techniques-7"
  8.     >
  9.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  11.       <v-toolbar-title>Title</v-toolbar-title>
  13.       <v-spacer></v-spacer>
  15.       <v-btn icon>
  16.         <v-icon>mdi-magnify</v-icon>
  17.       </v-btn>
  19.       <v-btn icon>
  20.         <v-icon>mdi-heart</v-icon>
  21.       </v-btn>
  23.       <v-btn icon>
  24.         <v-icon>mdi-dots-vertical</v-icon>
  25.       </v-btn>
  26.     </v-app-bar>
  27.     <v-sheet
  28.       id="scrolling-techniques-7"
  29.       class="overflow-y-auto"
  30.       max-height="600"
  31.     >
  32.       <v-container style="height: 1500px;">
  34.       </v-container>
  35.     </v-sheet>
  36.   </v-card>
  37. </template>

App bars（应用栏） - 图8

Daedal Theme Pro

Daedal Theme PRO — is a carefully crafted multi-purpose, responsive, and gorgeous theme.

ads by Vuetify

](https://store.vuetifyjs.com/product/daedal-responsive-multi-purpose-theme-pro?ref=vuetifyjs.com)

反转滚动

使用 inverted-scroll 属性时，该条将一直隐藏，直到用户滚动超过指定的阈值为止。 一旦超过阈值，v-app-bar 将继续显示，直到用户向上滚动超过阈值为止。 如果未提供 scroll-threshold 值，则将使用默认值 0。

template

  1. <template>
  2.   <v-card class="overflow-hidden">
  3.     <v-app-bar
  4.       absolute
  5.       color="primary"
  6.       dark
  7.       inverted-scroll
  8.       scroll-target="#scrolling-techniques-8"
  9.     >
  10.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  12.       <v-toolbar-title>Title</v-toolbar-title>
  14.       <v-spacer></v-spacer>
  16.       <v-btn icon>
  17.         <v-icon>mdi-magnify</v-icon>
  18.       </v-btn>
  20.       <v-btn icon>
  21.         <v-icon>mdi-heart</v-icon>
  22.       </v-btn>
  24.       <v-btn icon>
  25.         <v-icon>mdi-dots-vertical</v-icon>
  26.       </v-btn>
  27.     </v-app-bar>
  28.     <v-sheet
  29.       id="scrolling-techniques-8"
  30.       class="overflow-y-auto"
  31.       max-height="600"
  32.     >
  33.       <v-container style="height: 1500px;">
  35.       </v-container>
  36.     </v-sheet>
  37.   </v-card>
  38. </template>

App bars（应用栏） - 图9

切换导航抽屉

使用功能组件 v-app-bar-nav-icon 可以切换其他组件的状态，比如 v-navigation-drawer。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto overflow-hidden"
  4.     height="400"
  5.   >
  6.     <v-app-bar
  7.       color="deep-purple"
  8.       dark
  9.     >
  10.       <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
  12.       <v-toolbar-title>Title</v-toolbar-title>
  13.     </v-app-bar>
  15.     <v-navigation-drawer
  16.       v-model="drawer"
  17.       absolute
  18.       temporary
  19.     >
  20.       <v-list
  21.         nav
  22.         dense
  23.       >
  24.         <v-list-item-group
  25.           v-model="group"
  26.           active-class="deep-purple--text text--accent-4"
  27.         >
  28.           <v-list-item>
  29.             <v-list-item-icon>
  30.               <v-icon>mdi-home</v-icon>
  31.             </v-list-item-icon>
  32.             <v-list-item-title>Home</v-list-item-title>
  33.           </v-list-item>
  35.           <v-list-item>
  36.             <v-list-item-icon>
  37.               <v-icon>mdi-account</v-icon>
  38.             </v-list-item-icon>
  39.             <v-list-item-title>Account</v-list-item-title>
  40.           </v-list-item>
  42.         </v-list-item-group>
  43.       </v-list>
  44.     </v-navigation-drawer>
  45.   </v-card>
  46. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       drawer: false,
  5.     }),
  6.   }
  7. </script>

App bars（应用栏） - 图10

滚动阈值

v-app-bar 可以有滚动阀值。只有在通过 scroll-threshold 属性定义的像素数量之后，它才会开始对滚动进行反应。

template

  1. <template>
  2.   <v-card class="overflow-hidden">
  3.     <v-app-bar
  4.       absolute
  5.       color="#43a047"
  6.       dark
  7.       shrink-on-scroll
  8.       prominent
  9.       src="https://picsum.photos/1920/1080?random"
  10.       fade-img-on-scroll
  11.       scroll-target="#scrolling-techniques-5"
  12.       scroll-threshold="500"
  13.     >
  14.       <template v-slot:img="{ props }">
  15.         <v-img
  16.           v-bind="props"
  17.           gradient="to top right, rgba(55,236,186,.7), rgba(25,32,72,.7)"
  18.         ></v-img>
  19.       </template>
  21.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  23.       <v-toolbar-title>Title</v-toolbar-title>
  25.       <v-spacer></v-spacer>
  27.       <v-btn icon>
  28.         <v-icon>mdi-magnify</v-icon>
  29.       </v-btn>
  31.       <v-btn icon>
  32.         <v-icon>mdi-heart</v-icon>
  33.       </v-btn>
  35.       <v-btn icon>
  36.         <v-icon>mdi-dots-vertical</v-icon>
  37.       </v-btn>
  38.     </v-app-bar>
  39.     <v-sheet
  40.       id="scrolling-techniques-5"
  41.       class="overflow-y-auto"
  42.       max-height="600"
  43.     >
  44.       <v-container style="height: 1500px;"></v-container>
  45.     </v-sheet>
  46.   </v-card>
  47. </template>

App bars（应用栏） - 图11

Prominent w/ scroll shrink and image, fading on scroll

v-app-bar 的背景图像可以在滚动时淡入淡出。为此使用 fade-img-on-scroll 属性。

template

  1. <template>
  2.   <v-card class="overflow-hidden">
  3.     <v-app-bar
  4.       absolute
  5.       color="#6A76AB"
  6.       dark
  7.       shrink-on-scroll
  8.       prominent
  9.       src="https://picsum.photos/1920/1080?random"
  10.       fade-img-on-scroll
  11.       scroll-target="#scrolling-techniques-3"
  12.     >
  13.       <template v-slot:img="{ props }">
  14.         <v-img
  15.           v-bind="props"
  16.           gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
  17.         ></v-img>
  18.       </template>
  20.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  22.       <v-toolbar-title>Title</v-toolbar-title>
  24.       <v-spacer></v-spacer>
  26.       <v-btn icon>
  27.         <v-icon>mdi-magnify</v-icon>
  28.       </v-btn>
  30.       <v-btn icon>
  31.         <v-icon>mdi-heart</v-icon>
  32.       </v-btn>
  34.       <v-btn icon>
  35.         <v-icon>mdi-dots-vertical</v-icon>
  36.       </v-btn>
  38.       <template v-slot:extension>
  39.         <v-tabs align-with-title>
  40.           <v-tab>Tab 1</v-tab>
  41.           <v-tab>Tab 2</v-tab>
  42.           <v-tab>Tab 3</v-tab>
  43.         </v-tabs>
  44.       </template>
  45.     </v-app-bar>
  46.     <v-sheet
  47.       id="scrolling-techniques-3"
  48.       class="overflow-y-auto"
  49.       max-height="600"
  50.     >
  51.       <v-container style="height: 1000px;"></v-container>
  52.     </v-sheet>
  53.   </v-card>
  54. </template>

App bars（应用栏） - 图12

带菜单

你可以通过添加 VMenu 来轻松扩展 app bar 的功能。点击最后一个图标，看看它的动作。

template script

  1. <template>
  2.   <v-card class="overflow-hidden">
  3.     <v-app-bar
  4.       absolute
  5.       color="#6A76AB"
  6.       dark
  7.       shrink-on-scroll
  8.       prominent
  9.       src="https://picsum.photos/1920/1080?random"
  10.       fade-img-on-scroll
  11.       scroll-target="#scrolling-techniques-4"
  12.     >
  13.       <template v-slot:img="{ props }">
  14.         <v-img
  15.           v-bind="props"
  16.           gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
  17.         ></v-img>
  18.       </template>
  20.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  22.       <v-toolbar-title>Title</v-toolbar-title>
  24.       <v-spacer></v-spacer>
  26.       <v-btn icon>
  27.         <v-icon>mdi-magnify</v-icon>
  28.       </v-btn>
  30.       <v-btn icon>
  31.         <v-icon>mdi-heart</v-icon>
  32.       </v-btn>
  34.       <v-menu
  35.         bottom
  36.         left
  37.       >
  38.         <template v-slot:activator="{ on }">
  39.           <v-btn
  40.             icon
  41.             color="yellow"
  42.             v-on="on"
  43.           >
  44.             <v-icon>mdi-dots-vertical</v-icon>
  45.           </v-btn>
  46.         </template>
  48.         <v-list>
  49.           <v-list-item
  50.             v-for="(item, i) in items"
  51.             :key="i"
  52.           >
  53.             <v-list-item-title>{{ item.title }}</v-list-item-title>
  54.           </v-list-item>
  55.         </v-list>
  56.       </v-menu>
  58.       <template v-slot:extension>
  59.         <v-tabs align-with-title>
  60.           <v-tab>Tab 1</v-tab>
  61.           <v-tab>Tab 2</v-tab>
  62.           <v-tab>Tab 3</v-tab>
  63.         </v-tabs>
  64.       </template>
  65.     </v-app-bar>
  66.     <v-sheet
  67.       id="scrolling-techniques-4"
  68.       class="overflow-y-auto"
  69.       max-height="600"
  70.     >
  71.       <v-container style="height: 1000px;"></v-container>
  72.     </v-sheet>
  73.   </v-card>
  74. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { title: 'Click Me' },
  6.         { title: 'Click Me' },
  7.         { title: 'Click Me' },
  8.         { title: 'Click Me 2' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

App bars（应用栏） - 图13