应用栏

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

用例

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

App bars(应用栏) - 图1

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

函数组件

  • v-app-bar-nav-icon:专门为 v-toolbarv-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>
  9. <v-toolbar-title>Page title</v-toolbar-title>
  10. <v-spacer></v-spacer>
  11. <v-btn icon>
  12. <v-icon>mdi-heart</v-icon>
  13. </v-btn>
  14. <v-btn icon>
  15. <v-icon>mdi-magnify</v-icon>
  16. </v-btn>
  17. <v-menu
  18. left
  19. bottom
  20. >
  21. <template v-slot:activator="{ on }">
  22. <v-btn icon v-on="on">
  23. <v-icon>mdi-dots-vertical</v-icon>
  24. </v-btn>
  25. </template>
  26. <v-list>
  27. <v-list-item
  28. v-for="n in 5"
  29. :key="n"
  30. @click="() => {}"
  31. >
  32. <v-list-item-title>Option {{ n }}</v-list-item-title>
  33. </v-list-item>
  34. </v-list>
  35. </v-menu>
  36. </v-app-bar>
  37. </div>
  38. </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>
  12. <v-toolbar-title>Title</v-toolbar-title>
  13. <v-spacer></v-spacer>
  14. <v-btn icon>
  15. <v-icon>mdi-magnify</v-icon>
  16. </v-btn>
  17. <v-btn icon>
  18. <v-icon>mdi-heart</v-icon>
  19. </v-btn>
  20. <v-btn icon>
  21. <v-icon>mdi-dots-vertical</v-icon>
  22. </v-btn>
  23. </v-app-bar>
  24. <v-sheet
  25. id="scrolling-techniques"
  26. class="overflow-y-auto"
  27. max-height="600"
  28. >
  29. <v-container style="height: 1000px;"></v-container>
  30. </v-sheet>
  31. </v-card>
  32. </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>
  17. <v-app-bar-nav-icon></v-app-bar-nav-icon>
  18. <v-toolbar-title>Title</v-toolbar-title>
  19. <v-spacer></v-spacer>
  20. <v-btn icon>
  21. <v-icon>mdi-magnify</v-icon>
  22. </v-btn>
  23. <v-btn icon>
  24. <v-icon>mdi-heart</v-icon>
  25. </v-btn>
  26. <v-btn icon>
  27. <v-icon>mdi-dots-vertical</v-icon>
  28. </v-btn>
  29. </v-app-bar>
  30. <v-sheet
  31. id="scrolling-techniques-2"
  32. class="overflow-y-auto"
  33. max-height="600"
  34. >
  35. <v-container style="height: 1000px;"></v-container>
  36. </v-sheet>
  37. </v-card>
  38. </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>
  12. <v-toolbar-title>Title</v-toolbar-title>
  13. <v-spacer></v-spacer>
  14. <v-btn icon>
  15. <v-icon>mdi-magnify</v-icon>
  16. </v-btn>
  17. <v-btn icon>
  18. <v-icon>mdi-heart</v-icon>
  19. </v-btn>
  20. <v-btn icon>
  21. <v-icon>mdi-dots-vertical</v-icon>
  22. </v-btn>
  23. </v-app-bar>
  24. <v-sheet
  25. id="scrolling-techniques-4"
  26. class="overflow-y-auto"
  27. max-height="600"
  28. >
  29. <v-container style="height: 1000px;"></v-container>
  30. </v-sheet>
  31. </v-card>
  32. </template>

App bars(应用栏) - 图6

可折叠栏

使用 collapsecollapse-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>
  12. <v-toolbar-title>Collapsing Bar</v-toolbar-title>
  13. <v-spacer></v-spacer>
  14. <v-checkbox
  15. v-model="collapseOnScroll"
  16. color="white"
  17. hide-details
  18. ></v-checkbox>
  19. </v-app-bar>
  20. <v-sheet
  21. id="scrolling-techniques-6"
  22. class="overflow-y-auto"
  23. max-height="600"
  24. >
  25. <v-container style="height: 1000px;"></v-container>
  26. </v-sheet>
  27. </v-card>
  28. </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>
  10. <v-toolbar-title>Title</v-toolbar-title>
  11. <v-spacer></v-spacer>
  12. <v-btn icon>
  13. <v-icon>mdi-magnify</v-icon>
  14. </v-btn>
  15. <v-btn icon>
  16. <v-icon>mdi-heart</v-icon>
  17. </v-btn>
  18. <v-btn icon>
  19. <v-icon>mdi-dots-vertical</v-icon>
  20. </v-btn>
  21. </v-app-bar>
  22. <v-sheet
  23. id="scrolling-techniques-7"
  24. class="overflow-y-auto"
  25. max-height="600"
  26. >
  27. <v-container style="height: 1500px;">
  28. </v-container>
  29. </v-sheet>
  30. </v-card>
  31. </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>
  11. <v-toolbar-title>Title</v-toolbar-title>
  12. <v-spacer></v-spacer>
  13. <v-btn icon>
  14. <v-icon>mdi-magnify</v-icon>
  15. </v-btn>
  16. <v-btn icon>
  17. <v-icon>mdi-heart</v-icon>
  18. </v-btn>
  19. <v-btn icon>
  20. <v-icon>mdi-dots-vertical</v-icon>
  21. </v-btn>
  22. </v-app-bar>
  23. <v-sheet
  24. id="scrolling-techniques-8"
  25. class="overflow-y-auto"
  26. max-height="600"
  27. >
  28. <v-container style="height: 1500px;">
  29. </v-container>
  30. </v-sheet>
  31. </v-card>
  32. </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>
  11. <v-toolbar-title>Title</v-toolbar-title>
  12. </v-app-bar>
  13. <v-navigation-drawer
  14. v-model="drawer"
  15. absolute
  16. temporary
  17. >
  18. <v-list
  19. nav
  20. dense
  21. >
  22. <v-list-item-group
  23. v-model="group"
  24. active-class="deep-purple--text text--accent-4"
  25. >
  26. <v-list-item>
  27. <v-list-item-icon>
  28. <v-icon>mdi-home</v-icon>
  29. </v-list-item-icon>
  30. <v-list-item-title>Home</v-list-item-title>
  31. </v-list-item>
  32. <v-list-item>
  33. <v-list-item-icon>
  34. <v-icon>mdi-account</v-icon>
  35. </v-list-item-icon>
  36. <v-list-item-title>Account</v-list-item-title>
  37. </v-list-item>
  38. </v-list-item-group>
  39. </v-list>
  40. </v-navigation-drawer>
  41. </v-card>
  42. </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>
  20. <v-app-bar-nav-icon></v-app-bar-nav-icon>
  21. <v-toolbar-title>Title</v-toolbar-title>
  22. <v-spacer></v-spacer>
  23. <v-btn icon>
  24. <v-icon>mdi-magnify</v-icon>
  25. </v-btn>
  26. <v-btn icon>
  27. <v-icon>mdi-heart</v-icon>
  28. </v-btn>
  29. <v-btn icon>
  30. <v-icon>mdi-dots-vertical</v-icon>
  31. </v-btn>
  32. </v-app-bar>
  33. <v-sheet
  34. id="scrolling-techniques-5"
  35. class="overflow-y-auto"
  36. max-height="600"
  37. >
  38. <v-container style="height: 1500px;"></v-container>
  39. </v-sheet>
  40. </v-card>
  41. </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>
  19. <v-app-bar-nav-icon></v-app-bar-nav-icon>
  20. <v-toolbar-title>Title</v-toolbar-title>
  21. <v-spacer></v-spacer>
  22. <v-btn icon>
  23. <v-icon>mdi-magnify</v-icon>
  24. </v-btn>
  25. <v-btn icon>
  26. <v-icon>mdi-heart</v-icon>
  27. </v-btn>
  28. <v-btn icon>
  29. <v-icon>mdi-dots-vertical</v-icon>
  30. </v-btn>
  31. <template v-slot:extension>
  32. <v-tabs align-with-title>
  33. <v-tab>Tab 1</v-tab>
  34. <v-tab>Tab 2</v-tab>
  35. <v-tab>Tab 3</v-tab>
  36. </v-tabs>
  37. </template>
  38. </v-app-bar>
  39. <v-sheet
  40. id="scrolling-techniques-3"
  41. class="overflow-y-auto"
  42. max-height="600"
  43. >
  44. <v-container style="height: 1000px;"></v-container>
  45. </v-sheet>
  46. </v-card>
  47. </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>
  19. <v-app-bar-nav-icon></v-app-bar-nav-icon>
  20. <v-toolbar-title>Title</v-toolbar-title>
  21. <v-spacer></v-spacer>
  22. <v-btn icon>
  23. <v-icon>mdi-magnify</v-icon>
  24. </v-btn>
  25. <v-btn icon>
  26. <v-icon>mdi-heart</v-icon>
  27. </v-btn>
  28. <v-menu
  29. bottom
  30. left
  31. >
  32. <template v-slot:activator="{ on }">
  33. <v-btn
  34. icon
  35. color="yellow"
  36. v-on="on"
  37. >
  38. <v-icon>mdi-dots-vertical</v-icon>
  39. </v-btn>
  40. </template>
  41. <v-list>
  42. <v-list-item
  43. v-for="(item, i) in items"
  44. :key="i"
  45. >
  46. <v-list-item-title>{{ item.title }}</v-list-item-title>
  47. </v-list-item>
  48. </v-list>
  49. </v-menu>
  50. <template v-slot:extension>
  51. <v-tabs align-with-title>
  52. <v-tab>Tab 1</v-tab>
  53. <v-tab>Tab 2</v-tab>
  54. <v-tab>Tab 3</v-tab>
  55. </v-tabs>
  56. </template>
  57. </v-app-bar>
  58. <v-sheet
  59. id="scrolling-techniques-4"
  60. class="overflow-y-auto"
  61. max-height="600"
  62. >
  63. <v-container style="height: 1000px;"></v-container>
  64. </v-sheet>
  65. </v-card>
  66. </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