Vuetify2.x学习笔记(贰)：导航栏(tabbar)和导航抽屉(navigation drawer)、主题颜色(theme)、列表(list)、间距(padding&margin)

▲导航栏

使用<v-app-bar>创建一个导航栏

• 添加app 使之能固定在页面上方(fixed)
• 添加flat 移除阴影
• 用color属性设置颜色
• 添加dense 使导航栏更窄
• 添加hide-on-scroll 页面往下滚动时导航栏隐藏
• 添加invert-scroll 页面往上滚动时导航栏隐藏
• 用src属性设置背景图片地址

使用<v-toolbar-title>创建导航栏的标题

<v-spacer>相当于是左右的分界线 在v-spacer上面的标签将会在导航栏左侧 在v-spacer下面的标签将会在导航栏右侧

<v-app-bar app flat>
	<!-- 标题 -->
	<v-toolbar-title class="text-uppercase grey--text">
	    <span class="font-weight-light">Hello</span>
	    <span>Piconjo</span>
	</v-toolbar-title>
	
	<!-- 在v-spacer上面的标签将会在导航栏左侧 在v-spacer下面的标签将会在导航栏右侧 -->
	<v-spacer></v-spacer>
	
	<!-- 按钮1 -->
	<v-btn outlined class="mx-2" color="grey">
	    <span>LoveU</span>
	    <v-icon right>favorite</v-icon>
	</v-btn>
	<!-- 按钮2 -->
	<v-btn outlined class="mx-2" color="grey">
	    <span>Login</span>
	    <v-icon right>lock</v-icon>
	</v-btn>
</v-app-bar>

效果：

导航抽屉

导航抽屉就是大部分是从页面侧边弹出来以供用户浏览的组件

使用<v-navigation-drawer>创建一个导航抽屉

• 添加app 使之能固定在页面上方(fixed)
  导航抽屉必须添加app属性 否则无法显示
• 添加right 使之显示在页面右侧
• 添加expand-on-hover 使之变成缩小版 当悬停在导航抽屉时扩展为正常大小
• 用src属性设置背景图片地址

导航抽屉还需要绑定一个用于控制其显示还是隐藏的属性 true为显示 false为隐藏

<v-navigation-drawer v-model="drawer" app class="indigo">
	<p>Test</p>
</v-navigation-drawer>

...

<script>
export default {
    
    data(){
    
        return {
    
            drawer