一. 应用栏 V-app-bar
v-app-bar组件通常是站点导航的主要来源。
App-bar组件与drawer配合使用，可以在应用程序中提供导航。
1. appbar的外观风格
(1). 内置风格
<template>
<div class="text-center">
<v-app-bar color="success">普通appbar </v-app-bar>
<p></p>
<v-app-bar color="success" dense>紧凑appbar </v-app-bar>
<p></p>
<v-app-bar color="success" flat>扁平appbar </v-app-bar>
<p></p>
<v-app-bar color="success" prominent>加高appbar</v-app-bar>
</div>
</template>
(2). 指定高度 height
此外, 我们还可以指定高度, 此高度会覆盖所有其他高度设定
<v-app-bar color="success" height="200">
<v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
</v-app-bar>
(3). 圆角风格 rounded
<v-app-bar color="success" rounded> </v-app-bar>
(4). 指定背景图片 src
<v-app-bar src="~assets/background.jpg"> </v-app-bar>
2. appbar的子组件
(1) 导航条按钮v-app-bar-nav-icon
<template>
<div class="text-center">
<v-app-bar color="success">
<v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
</v-app-bar>
<v-navigation-drawer v-model="drawer" absolute temporary>
</v-navigation-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawer: false,
};
},
};
</script>
(2) 导航条标题 v-app-bar-title
<v-app-bar color="success">
<v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
</v-app-bar>
3. 位置
(1) . 固定位置 fixed
给组件应用 position: fixed
无论如何滚动, appbar永远置顶
<v-app-bar color="success" fixed>
<v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
</v-app-bar>
(2). 页面绝对定位 absolute
应用 position: absolute 样式到组件.
(3). 页面浮动定位 floating
将 display: inline-flex 应用于组件。
4. 折叠 collapse
<v-app-bar color="success" collapse>
<v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
</v-app-bar>
5. 滚动动作
(1). 滚动时折叠 collapse-on-scroll
<v-app-bar color="success" fixed collapse-on-scroll>
<v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
</v-app-bar>
(2). 滚动时隐藏
<v-app-bar color="success" hide-on-scroll>
<v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
</v-app-bar>
(3). 滚动时显示
<template>
<div>
<v-app-bar color="success" fixed inverted-scroll>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
</v-app-bar>
<p style="height: 30rem; background-color: #789">1</p>
<p style="height: 30rem; background-color: #654">1</p>
<p style="height: 30rem; background-color: #132">1</p>
</div>
</template>
(4). 加高bar滚动时缩小 shrink-on-scroll
<template>
<div>
<v-app-bar color="success" prominent fixed shrink-on-scroll>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
</v-app-bar>
<p style="height: 30rem; background-color: #789">1</p>
<p style="height: 30rem; background-color: #654">1</p>
<p style="height: 30rem; background-color: #132">1</p>
</div>
</template>
(5). 加高bar滚动时淡出图片 fade-img-on-scroll
<template>
<div>
<v-app-bar
color="success"
prominent
fixed
src="~assets/background.jpg"
shrink-on-scroll
fade-img-on-scroll
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
</v-app-bar>
<p style="height: 30rem; background-color: #789">1</p>
<p style="height: 30rem; background-color: #654">1</p>
<p style="height: 30rem; background-color: #132">1</p>
</div>
</template>
(6). 滚动时阴影加深 elevate-on-scroll
<v-app-bar color="success" fixed elevate-on-scroll>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
</v-app-bar>
6. 插槽
appbar可以方便的通过插槽插入更加复杂的控件
(1). 插入图片 v-slot:img
<v-app-bar color="success" fixed prominent shrink-on-scroll>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
src="~assets/background.jpg"
></v-img>
</template>
</v-app-bar>
(2). 插入扩展组件 v-slot:extension
<v-app-bar color="success" fixed prominent shrink-on-scroll>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
<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>
7. 适合搭配appbar的组件
(1). 间隔 v-spacer
<v-app-bar color="success" fixed>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
<v-spacer></v-spacer>
<v-btn icon><v-icon>mdi-antenna</v-icon></v-btn>
<v-btn icon><v-icon>mdi-heart</v-icon></v-btn>
</v-app-bar>
(2). 目录 v-menu
<v-app-bar color="success" fixed>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-app-bar-title>标题</v-app-bar-title>
<v-spacer></v-spacer>
<v-btn icon><v-icon>mdi-antenna</v-icon></v-btn>
<v-btn icon><v-icon>mdi-heart</v-icon></v-btn>
<v-menu bottom left>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item>
<v-list-item-title>选项1</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>选项2</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>选项3</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
二. 工具栏 v-toolbar
v-toolbar组件通常也是站点导航的主要来源。
v-toolbar组件与v-navigation-drawer和v-card配合使用非常有效。可以在应用程序中提供导航。
toolbar很多地方和appbar一致
1. toolbar的外观风格
(1). 内置风格
<template>
<div class="text-center">
<v-toolbar color="success">普通toolbar </v-toolbar>
<p></p>
<v-toolbar color="success" short>稍矮toolbar </v-toolbar>
<p></p>
<v-toolbar color="success" dense>紧凑toolbar </v-toolbar>
<p></p>
<v-toolbar color="success" flat>扁平toolbar </v-toolbar>
<p></p>
<v-toolbar color="success" prominent>加高toolbar</v-toolbar>
</div>
</template>
(2). 指定高度 height
此外, 我们还可以指定高度, 此高度会覆盖所有其他高度设定
<v-toolbar color="success" height="200">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
</v-toolbar>
(3). 圆角风格 rounded
<v-toolbar color="success" rounded> </v-toolbar>
(4). 指定背景图片 src
<v-toolbar src="~assets/background.jpg"> </v-toolbar>
2. appbar的子组件
(1) 导航条按钮v-app-bar-nav-icon
和appbar用法一样
(2) 导航条标题 v-app-bar-title
和appbar用法一样
3. 位置
(1) . 固定位置 fixed
和appbar用法一样
(2). 页面绝对定位 absolute
应用 position: absolute 样式到组件.
(3). 页面浮动定位 floating
将 display: inline-flex 应用于组件。
特别适合用在组件之上浮动工具栏
<template>
<v-card
class="pa-4"
flat
height="300px"
img="https://cdn.vuetifyjs.com/images/toolbar/map.jpg"
>
<v-toolbar
dense
floating
>
<v-text-field
hide-details
prepend-icon="mdi-magnify"
single-line
></v-text-field>
<v-btn icon>
<v-icon>mdi-crosshairs-gps</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</template>
4. 折叠 collapse
和appbar用法一样
5. 滚动动作
(1). 滚动时折叠 collapse-on-scroll
和appbar用法一样
(2). 滚动时隐藏
和appbar用法一样
(3). 滚动时显示
和appbar用法一样
(4). 加高bar滚动时缩小 shrink-on-scroll
和appbar用法一样
(5). 加高bar滚动时淡出图片 fade-img-on-scroll
和appbar用法一样
(6). 滚动时阴影加深 elevate-on-scroll
和appbar用法一样
6. 插槽
toolbar可以方便的通过插槽插入更加复杂的控件
和appbar用法一样
7. 应用举例: 跟随上下文操作
<template>
<div class="text-center">
<v-toolbar
dark
:color="selection.length ? 'grey darken-4' : 'deep-purple accent-4'"
>
<v-app-bar-nav-icon v-if="!selection.length"></v-app-bar-nav-icon>
<v-btn v-else icon @click="selection = []">
<v-icon>mdi-close</v-icon>
</v-btn>
<v-toolbar-title>
{{ selection.length ? `已选: ${selection.length} ` : "请选择服务员" }}
</v-toolbar-title>
<v-spacer></v-spacer>
<v-scale-transition>
<v-btn v-if="selection.length" key="export" icon>
<v-icon>mdi-export-variant</v-icon>
</v-btn>
</v-scale-transition>
<v-scale-transition>
<v-btn v-if="selection.length" key="delete" icon>
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-scale-transition>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
<v-checkbox
v-for="item in items"
v-model="selection"
:label="item"
:value="item"
:key="item"
></v-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
selection: [],
items: ["貂蝉", "西施", "王昭君", "杨玉环"],
};
},
};
</script>
三. 系统栏 v-system-bar
v-system-bar 组件可以用于向用户显示状态。 它看起来像Android系统栏，可以包含图标、空格和一些文本
- lights-out 属性可以来降低不透明度
1. 类似手机状态栏风格
<template>
<div class="home">
<v-system-bar color="orange" lights-out>
<v-icon x-small>mdi-message</v-icon>
<span>10 unread messages</span>
<v-spacer></v-spacer>
<v-icon x-small>mdi-wifi-strength-4</v-icon>
<v-icon x-small>mdi-signal-cellular-outline</v-icon>
<v-icon x-small>mdi-battery</v-icon>
<span>12:30</span>
</v-system-bar>
</div>
</template>
2. 类似windows窗口风格
<v-system-bar color="orange" lights-out window>
<v-icon>mdi-skull-scan</v-icon>
<span>新建文件夹</span>
<v-spacer></v-spacer>
<v-icon>mdi-minus</v-icon>
<v-icon>mdi-checkbox-blank-outline</v-icon>
<v-icon>mdi-close</v-icon>
</v-system-bar>
