应用栏
v-app-bar
组件对于任何图形用户界面 (GUI) 都是至关重要的,因为它通常是网站导航的主要来源。app-bar 和 v-navigation-drawer 结合在一起为应用程序提供站点导航。
用例
v-app-bar
组件用于应用程序范围内的操作和信息。
当在 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-bar 密集。 密集的应用栏的高度低于常规应用栏
template
<template>
<div>
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Page title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-menu
left
bottom
>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="n in 5"
:key="n"
@click="() => {}"
>
<v-list-item-title>Option {{ n }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
</div>
</template>
Prominent w/ scroll shrink
当用户向下滚动时,带有 prominent
属性的 v-app-bar
可以选择缩小其高度。这提供了一个平滑的过渡,当用户滚动内容时占用更少的视觉空间。缩小高度有两个选项,dense (48px) 和 short (56px)。
template
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="indigo darken-2"
dark
shrink-on-scroll
prominent
scroll-target="#scrolling-techniques"
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-app-bar>
<v-sheet
id="scrolling-techniques"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1000px;"></v-container>
</v-sheet>
</v-card>
</template>
Prominent w/ scroll shrink and image
v-app-bar
可以包含背景图像。你可以通过 src
设置源文件。如果你需要自定义 v-img
属性,应用程序栏会提供一个 img 插槽。
template
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="#fcb69f"
dark
shrink-on-scroll
src="https://picsum.photos/1920/1080?random"
scroll-target="#scrolling-techniques-2"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
></v-img>
</template>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-app-bar>
<v-sheet
id="scrolling-techniques-2"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1000px;"></v-container>
</v-sheet>
</v-card>
</template>
滚动时隐藏
v-app-bar
可以在滚动中隐藏。为此使用 hide-on-scroll
属性。
template
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="teal lighten-3"
dark
hide-on-scroll
prominent
scroll-target="#scrolling-techniques-4"
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-app-bar>
<v-sheet
id="scrolling-techniques-4"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1000px;"></v-container>
</v-sheet>
</v-card>
</template>
可折叠栏
使用 collapse 和 collapse-on-scroll 属性可以可以轻松控制用户与之交互的工具栏的状态。
template script
<template>
<v-card class="overflow-hidden">
<v-app-bar
:collapse="!collapseOnScroll"
:collapse-on-scroll="collapseOnScroll"
absolute
color="deep-purple accent-4"
dark
scroll-target="#scrolling-techniques-6"
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Collapsing Bar</v-toolbar-title>
<v-spacer></v-spacer>
<v-checkbox
v-model="collapseOnScroll"
color="white"
hide-details
></v-checkbox>
</v-app-bar>
<v-sheet
id="scrolling-techniques-6"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1000px;"></v-container>
</v-sheet>
</v-card>
</template>
<script>
export default {
data: () => ({
collapseOnScroll: true,
}),
}
</script>
滚动时升高栏
当使用 elevate-on-scroll 属性时,v-app-bar
将停留在 0dp 的高度,直到用户开始向下滚动。 滚动后,该条会升至 4dp。
template
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="white"
elevate-on-scroll
scroll-target="#scrolling-techniques-7"
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-app-bar>
<v-sheet
id="scrolling-techniques-7"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1500px;">
</v-container>
</v-sheet>
</v-card>
</template>
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
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="primary"
dark
inverted-scroll
scroll-target="#scrolling-techniques-8"
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-app-bar>
<v-sheet
id="scrolling-techniques-8"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1500px;">
</v-container>
</v-sheet>
</v-card>
</template>
切换导航抽屉
使用功能组件 v-app-bar-nav-icon
可以切换其他组件的状态,比如 v-navigation-drawer。
template script
<template>
<v-card
class="mx-auto overflow-hidden"
height="400"
>
<v-app-bar
color="deep-purple"
dark
>
<v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
</v-app-bar>
<v-navigation-drawer
v-model="drawer"
absolute
temporary
>
<v-list
nav
dense
>
<v-list-item-group
v-model="group"
active-class="deep-purple--text text--accent-4"
>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-home</v-icon>
</v-list-item-icon>
<v-list-item-title>Home</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-account</v-icon>
</v-list-item-icon>
<v-list-item-title>Account</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
</v-card>
</template>
<script>
export default {
data: () => ({
drawer: false,
}),
}
</script>
滚动阈值
v-app-bar
可以有滚动阀值。只有在通过 scroll-threshold
属性定义的像素数量之后,它才会开始对滚动进行反应。
template
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="#43a047"
dark
shrink-on-scroll
prominent
src="https://picsum.photos/1920/1080?random"
fade-img-on-scroll
scroll-target="#scrolling-techniques-5"
scroll-threshold="500"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(55,236,186,.7), rgba(25,32,72,.7)"
></v-img>
</template>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-app-bar>
<v-sheet
id="scrolling-techniques-5"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1500px;"></v-container>
</v-sheet>
</v-card>
</template>
Prominent w/ scroll shrink and image, fading on scroll
v-app-bar
的背景图像可以在滚动时淡入淡出。为此使用 fade-img-on-scroll
属性。
template
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="#6A76AB"
dark
shrink-on-scroll
prominent
src="https://picsum.photos/1920/1080?random"
fade-img-on-scroll
scroll-target="#scrolling-techniques-3"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
></v-img>
</template>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
<template v-slot:extension>
<v-tabs align-with-title>
<v-tab>Tab 1</v-tab>
<v-tab>Tab 2</v-tab>
<v-tab>Tab 3</v-tab>
</v-tabs>
</template>
</v-app-bar>
<v-sheet
id="scrolling-techniques-3"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1000px;"></v-container>
</v-sheet>
</v-card>
</template>
带菜单
你可以通过添加 VMenu
来轻松扩展 app bar 的功能。点击最后一个图标,看看它的动作。
template script
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="#6A76AB"
dark
shrink-on-scroll
prominent
src="https://picsum.photos/1920/1080?random"
fade-img-on-scroll
scroll-target="#scrolling-techniques-4"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
></v-img>
</template>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-menu
bottom
left
>
<template v-slot:activator="{ on }">
<v-btn
icon
color="yellow"
v-on="on"
>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, i) in items"
:key="i"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<template v-slot:extension>
<v-tabs align-with-title>
<v-tab>Tab 1</v-tab>
<v-tab>Tab 2</v-tab>
<v-tab>Tab 3</v-tab>
</v-tabs>
</template>
</v-app-bar>
<v-sheet
id="scrolling-techniques-4"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1000px;"></v-container>
</v-sheet>
</v-card>
</template>
<script>
export default {
data: () => ({
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' },
],
}),
}
</script>