vuetify學習第三天之佈局-bars組件

vuetify學習第三天之佈局-bars組件

---

目錄

---

---

內容

---

1、HLM佈局

1.1、簡介

    HLM,既header,left和main的縮寫，爲典型的整體佈局之一。本例左側採用固定定位，顯示效果圖：

1.2、隱藏效果圖

1.3、 佈局分析

+ header : 頭部
+ left： 左側導航菜單
+ main： 內容主體

1.4、 適用vuetify組件：

+ header; v-app-bar
+ left-navagator: v-navigation-drawer
+ main: v-content
	+ 麪包屑功能標題： v-breadcrumbs
	+ 具體功能子組件 : 

1.5、實現代碼

<template>
<v-app>
	<!--應用程序導航條-->
	<v-app-bar>
		...
	</v-app-bar>
	<!--左側菜單導航-->
	<v-navigation-drawer>
		...
	</v-navigation-drawer>
	<!--內容主體-展示具體功能-->
	<v-content>
		<v-breadcrumbs
			...
		</v-breadcrumbs>
		<div>
			<!--定義一個路由錨點，Layout的子組件內容將在這裏展示-->
			<router-view
		</div>
	</v-content>

2、header

2.1、示例圖片：

2.2、源碼：

<template>
	<v-app-bar :dark="dark" color="primary" app>
		  <v-toolbar :dark="dark" color="primary" flat>
			<v-app-bar-nav-icon @click.stop="drawer=!drawer"></v-app-bar-nav-icon>
			<v-btn icon @click.stop="miniVariant = !miniVariant">
			  <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'" />
			</v-btn>
			<!-- 切換黑暗主題 -->
			<v-flex xs1>
			  <v-switch :label="dark ? '明亮':'暗黑' " v-model="dark" color="dark" hide-details />
			</v-flex>
			<!-- 頂部導航標題 -->
			<v-flex xs2></v-flex>
			<v-toolbar-title v-text="title" />
			<v-spacer />
			<!-- 調色板 -->
			<v-btn icon @click.stop="dark = !dark">
			  <v-icon>invert_colors</v-icon>
			</v-btn>
			<!-- 頂部導航用戶菜單 -->
			<v-btn icon @click.stop="dark = !dark">
			  <v-icon>account_box</v-icon>
			</v-btn>
		  </v-toolbar>
		</v-app-bar>
...
</template>
<script>
..
data() {
	return {
		dark: false, // 主體是否深色
	  miniVariant: false, // 是否展示爲mini圖標
	  drawer: true, // 左側導航是否隱藏
	  title: "樂優後臺管理系統", // 導航標題
	  ...
	}
}
</script>

2.3、v-app-bar組件常用屬性詳解

名稱	類型	默認值	介紹
color	material colo	undefined	導航條顏色樣式
dard	boolean	false	背景是否爲深色

2.4、v-toolbar 組件詳解

名稱	類型	默認值	介紹
color	material colo	undefined	導航條顏色樣式
dard	boolean	false	背景是否爲深色
flat	boolean	false	是否盒子陰影

2.5、 v-app-bar-nav-icon

2.6、v-flex

彈性佈局組件

2.7、v-icon

按鈕

名稱	類型	默認值	介紹
color	material colo	undefined	按鈕顏色樣式
dard	boolean	false	背景是否爲深色
size		undefined	按鈕組件

2.8、v-switch : 開關按鈕

切換效果：

名稱	類型	默認值	介紹
value		undefined	開關控制量
label	string	‘’	切換開關時顯示的標題

3、left 詳情見v-navagation-drawer組件文檔

後面更新

4、main

• v-content 作用同 div

5、總結

其他佈局樣式，以後用到在更新。