工具栏

v-toolbar 组件对于任何 gui 都是至关重要的，因为它通常是站点导航的主要来源。工具栏组件与 v-navigation-drawer 和 v-card 配合使用效果非常好。

用例

工具栏是一个灵活的容器，可以通过多种方式使用。 默认情况下，工具栏在桌面上的高度为 64px，在移动设备上的高度为 56px。 工具栏上有许多辅助组件可供使用。v-toolbar-title 用于显示标题， v-toolbar-items 允许 v-btn 扩展整个高度。

Toolbars（工具栏） - 图1

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

API

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

Toolbars（工具栏） - 图2

示例

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

突出的工具栏

突出的工具栏将 v-toolbar‘ 的高度增加到 _128px_，并将 v-toolbar-title 放置在容器的底部。 这在 v-app 中进行了扩展，能够将 prominent 工具栏缩小为 dense 或 short。

template

  1. <template>
  2.   <v-card
  3.     color="grey lighten-4"
  4.     flat
  5.     height="200px"
  6.     tile
  7.   >
  8.     <v-toolbar prominent extended>
  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-toolbar>
  27.   </v-card>
  28. </template>

Toolbars（工具栏） - 图3

密集的工具栏

密集工具栏降低其高度未48px,这也是移动设备横向定位的默认行为。

template

  1. <template>
  2.   <v-card
  3.     color="grey lighten-4"
  4.     flat
  5.     height="200px"
  6.     tile
  7.   >
  8.     <v-toolbar dense>
  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-toolbar>
  27.   </v-card>
  28. </template>

Toolbars（工具栏） - 图4

明亮和暗黑

工具栏有两个变种，明亮和暗黑。明亮工具栏有深色的按钮和黑暗的文字，而暗黑工具栏有白色的按钮和白色的文字。

template

  1. <template>
  2.   <v-card flat>
  3.     <v-container fluid>
  4.       <v-row class="child-flex">
  5.         <div>
  6.           <v-toolbar>
  7.             <v-btn icon class="hidden-xs-only">
  8.               <v-icon>mdi-arrow-left</v-icon>
  9.             </v-btn>
  11.             <v-toolbar-title>Title</v-toolbar-title>
  13.             <v-spacer></v-spacer>
  15.             <v-btn icon class="hidden-xs-only">
  16.               <v-icon>mdi-magnify</v-icon>
  17.             </v-btn>
  18.           </v-toolbar>
  19.         </div>
  21.         <div style="flex-basis: 20%">
  22.           <v-toolbar dark>
  23.             <v-spacer></v-spacer>
  25.             <v-btn icon>
  26.               <v-icon>mdi-reply</v-icon>
  27.             </v-btn>
  29.             <v-btn icon>
  30.               <v-icon>mdi-dots-vertical</v-icon>
  31.             </v-btn>
  32.           </v-toolbar>
  33.         </div>
  34.       </v-row>
  35.     </v-container>
  36.   </v-card>
  37. </template>

Toolbars（工具栏） - 图5

变量

一个应用程序栏有多个可以应用主题和辅助类的变种，范围从明亮和暗黑的主题、色彩和透明度。

template script

  1. <template>
  2.   <v-row>
  3.     <v-col
  4.       v-for="(bar, i) in bars"
  5.       :key="i"
  6.       cols="12"
  7.       sm="12"
  8.       md="6"
  9.       class="my-4"
  10.     >
  11.       <v-card color="grey lighten-4" flat height="200px">
  12.         <v-toolbar :color="bar.class" :dark="bar.dark">
  13.           <v-app-bar-nav-icon></v-app-bar-nav-icon>
  14.           <v-toolbar-title>Title</v-toolbar-title>
  15.           <v-spacer></v-spacer>
  16.           <v-btn icon>
  17.             <v-icon>mdi-magnify</v-icon>
  18.           </v-btn>
  19.           <v-btn icon>
  20.             <v-icon>mdi-heart</v-icon>
  21.           </v-btn>
  22.           <v-btn icon>
  23.             <v-icon>mdi-dots-vertical</v-icon>
  24.           </v-btn>
  25.         </v-toolbar>
  26.       </v-card>
  27.     </v-col>
  28.   </v-row>
  29. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       bars: [
  5.         { class: '' },
  6.         { class: '', dark: true },
  7.         { class: 'primary', dark: true },
  8.         { class: 'elevation-0' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

Toolbars（工具栏） - 图6

突出 w/ Background

工具栏可以显示背景，而不是纯色。 可以通过使用 img 插槽并提供您自己的 v-img 组件来进行修改。 可以使用 v-app-bar 淡化背景。

template

  1. <template>
  2.   <div>
  3.     <v-toolbar
  4.       dark
  5.       prominent
  6.       src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
  7.     >
  8.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  10.       <v-toolbar-title>Vuetify</v-toolbar-title>
  12.       <v-spacer></v-spacer>
  14.       <v-btn icon>
  15.         <v-icon>mdi-export</v-icon>
  16.       </v-btn>
  17.     </v-toolbar>
  18.   </div>
  19. </template>

Toolbars（工具栏） - 图7

扩展

无需使用 extension 插槽即可扩展工具栏。

template

  1. <template>
  2.   <v-card
  3.     color="grey lighten-4"
  4.     flat
  5.     height="200px"
  6.     tile
  7.   >
  8.     <v-toolbar extended>
  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-toolbar>
  27.   </v-card>
  28. </template>

Toolbars（工具栏） - 图8

Vuetify Newsletter

See the latest and greatest Vuetify guides, upcoming releases, community projects and more!

ads by Vuetify

](https://www.getrevue.co/profile/vuetify?ref=vuetifyjs.com)

扩展高度

扩展的高度可以定制。

template

  1. <template>
  2.   <v-card
  3.     color="grey lighten-4"
  4.     flat
  5.     height="200px"
  6.     tile
  7.   >
  8.     <v-toolbar extended extension-height="100">
  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-toolbar>
  27.   </v-card>
  28. </template>

Toolbars（工具栏） - 图9

折叠

可以折叠工具栏以节省屏幕空间。

template

  1. <template>
  2.   <v-card
  3.     color="grey lighten-4"
  4.     flat
  5.     height="200px"
  6.     tile
  7.   >
  8.     <v-toolbar collapse>
  9.       <v-btn icon>
  10.         <v-icon>mdi-magnify</v-icon>
  11.       </v-btn>
  13.       <v-btn icon>
  14.         <v-icon>mdi-dots-vertical</v-icon>
  15.       </v-btn>
  16.     </v-toolbar>
  17.   </v-card>
  18. </template>

Toolbars（工具栏） - 图10

灵活的工具栏和卡片工具栏

在本例中，我们使用 extended 属性将卡片偏移到工具栏的扩展内容区域。

template

  1. <template>
  2.   <v-card flat>
  3.     <v-toolbar
  4.       color="primary"
  5.       dark
  6.       extended
  7.       flat
  8.     >
  9.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  10.     </v-toolbar>
  12.     <v-card
  13.       class="mx-auto"
  14.       max-width="700"
  15.       style="margin-top: -64px;"
  16.     >
  17.       <v-toolbar flat>
  18.         <v-toolbar-title class="grey--text">Title</v-toolbar-title>
  20.         <v-spacer></v-spacer>
  22.         <v-btn icon>
  23.           <v-icon>mdi-magnify</v-icon>
  24.         </v-btn>
  26.         <v-btn icon>
  27.           <v-icon>mdi-apps</v-icon>
  28.         </v-btn>
  30.         <v-btn icon>
  31.           <v-icon>mdi-dots-vertical</v-icon>
  32.         </v-btn>
  33.       </v-toolbar>
  35.       <v-divider></v-divider>
  37.       <v-card-text style="height: 200px;"></v-card-text>
  38.     </v-card>
  39.   </v-card>
  40. </template>

Toolbars（工具栏） - 图11

搜索时浮动

浮动工具栏被转换成内联元素，只占用所需的空间。这在将工具栏放置在内容上时特别有用。

template

  1. <template>
  2.   <v-card
  3.     class="pa-4"
  4.     flat
  5.     height="300px"
  6.     img="https://cdn.vuetifyjs.com/images/toolbar/map.jpg"
  7.   >
  8.     <v-toolbar
  9.       dense
  10.       floating
  11.     >
  12.       <v-text-field
  13.         hide-details
  14.         prepend-icon="search"
  15.         single-line
  16.       ></v-text-field>
  18.       <v-btn icon>
  19.         <v-icon>my_location</v-icon>
  20.       </v-btn>
  22.       <v-btn icon>
  23.         <v-icon>mdi-dots-vertical</v-icon>
  24.       </v-btn>
  25.     </v-toolbar>
  26.   </v-card>
  27. </template>

Toolbars（工具栏） - 图12

上下文操作栏

可以根据应用程序状态的变化更新工具栏的外观。在本例中，工具栏的颜色和内容根据用户在 v-select 中的选择而变化。

template script

  1. <template>
  2.   <v-card
  3.     max-width="500"
  4.     class="mx-auto"
  5.   >
  6.     <v-toolbar
  7.       :color="selection.length ? 'grey darken-4' : 'deep-purple accent-4'"
  8.       dark
  9.     >
  10.       <v-app-bar-nav-icon v-if="!selection.length"></v-app-bar-nav-icon>
  11.       <v-btn
  12.         v-else
  13.         icon
  14.         @click="selection = []"
  15.       >
  16.         <v-icon>mdi-close</v-icon>
  17.       </v-btn>
  19.       <v-toolbar-title>
  20.         {{ selection.length ? `${selection.length} selected` : 'Photos' }}
  21.       </v-toolbar-title>
  23.       <v-spacer></v-spacer>
  25.       <v-scale-transition>
  26.         <v-btn
  27.           v-if="selection.length"
  28.           key="export"
  29.           icon
  30.         >
  31.           <v-icon>mdi-export-variant</v-icon>
  32.         </v-btn>
  33.       </v-scale-transition>
  34.       <v-scale-transition>
  35.         <v-btn
  36.           v-if="selection.length"
  37.           key="delete"
  38.           icon
  39.         >
  40.           <v-icon>mdi-delete</v-icon>
  41.         </v-btn>
  42.       </v-scale-transition>
  44.       <v-btn icon>
  45.         <v-icon>mdi-dots-vertical</v-icon>
  46.       </v-btn>
  47.     </v-toolbar>
  49.     <v-card-text>
  50.       <v-select
  51.         v-model="selection"
  52.         :items="items"
  53.         multiple
  54.         label="Select an option"
  55.       ></v-select>
  56.     </v-card-text>
  57.   </v-card>
  58. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       selection: [],
  5.       items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
  6.     }),
  7.   }
  8. </script>

Toolbars（工具栏） - 图13