探索 Vuetify 介面框架(下)
📝 回顧上個章節：探索 Vuetify 介面框架(上)
搭建好 Vuetify 專案環境並加入 Employee Data 檔案 📂
目前的專案樣式如下：
這章節將延續上個章節，循序漸進手把手套用框架！
📋 目錄
[實作] 修改最上方 header 樣式
調整最上方 header 包括 bar, color, spacer, margin, icon 等設定。
step 1 bar 種類
最上方 bar 有兩種寫法，分別是 v-tool-bar & v-app-bar 。查看官方文件， v-app-bar 會是比較好的選擇。
看一下目前 v-app-bar 標籤，會看到 app 屬性，這是用來自動應用位置，fixed 到佈局元素，若想改成 absolute，可用 absolute 屬性來覆蓋此功能。
step 2 color 調整
v-app-bar 標籤內有個 color 屬性並設定為 primary，而 primary 對應的顏色可以在 plugins/vuetify.js 檔案自行定義修改。
Vuetify 支持 淺色light & 深色dark 主題，可以自行切換看一下效果 👾
step 3 v-spacer 認識
回到 App.vue 檔案， 往下有個 v-spacer 標籤，官方文件提到 v-spacer 間隔組件，用於分配父子組件之間的剩餘寬度。當一個v-spacer放置在子組件之前或之後時，組件將推到其容器的左右兩側。當多個組件之間使用多個v-spacer時，剩餘的寬度將均勻地分佈在每個 spacer 之間。可以將 v-spacer 標籤註解掉，看一下與設定之間的差異。
step 4 margin 認識
往下有個 class="mr-2" 邊界輔助工具， Vuetify 將邊距或填充應用於範圍從 0px 到 16px 的元素，使用的格式：{property}{direction}-{size}。m 代表 margin，r 代表 right，2 則代表 8px，有關詳細設定可以參考官方文件。
step 5 icon 設定
v-icon 組件提供大量圖標供使用，詳細圖標需參考官方材料設計圖標。使用mdi-前綴後跟圖標名稱即設定完成。嘗試加一個 icon 在標題前面，同時加上 margin-right。
<v-icon class="mr-2"> mdi-account-box-multiple </v-icon>接著把 App.vue 右方多餘的部分刪除，完整程式碼如下：
此時瀏覽器畫面如下：
header 部分看起來可以了 🙌
[實作] 修改表格 & 按鈕樣式
修改新增員工表單的區塊，包括 form, grid, btn 等設定。
step 1 form 種類
表單有兩種寫法：v-input& v-form。官方文件提到若要有驗證及延伸功能 v-form 會是比較好的選擇。由於驗證功能需要撰寫 methods 以及此系列著重於樣式套用，故先選擇簡易使用。在 InputForm.vue 輸入下列程式碼：
細看上方的程式碼，發現加入 v-text-field 組件，詳細屬性設定可參考官方文件。
step 2 grid 設定
接續目前的 InputForm.vue 檔案，可以看到 v-container,v-row,v-col grid 的設定。網格斷點的設定提供不同寬度的裝置，都可獲得好的響應式體驗，詳細設定可參考官方文件。
此時瀏覽器畫面如下：
表格樣式以及響應式設定已經完成，不過 Send 按鈕需要調整一下。
step 3 btn 修改
將原本的 <button> 標籤註解掉，加上 Vuetify 提供的 v-btn 標籤，同時加上 marin 設定。程式碼如下：
此時瀏覽器畫面如下：
新增員工表單區塊看起來可以了 🙌
[實作] 修改資料表格樣式
最後來修改 data table 樣式。v-data-table 組件使用 v-bind 綁定 header 跟 employee 資訊。資料表可以加上 sortable 排序功能，詳細屬性設定可參考官方文件。完整 DataTable.vue 程式碼如下：
此時瀏覽器畫面如下：
Employee Data 專案樣式的部分完成了 🎉
Vuetify 系列小結
先認識 Vuetify 並搭建環境，再經由循序漸進方式實作 UI 框架套用。此系列練習屬於基礎入門，使用框架時有諸多細部設定，還需自行查閱 Vuetify 官方文件。另外，此系列實作著重於框架樣式套用，實際新增員工資料功能並沒有涵蓋，這部分由筆者自行完成後續功能撰寫。完整功能的成果如下：
最後，附上 Employee Data 專案的 GitHub 檔案連結 🔗 (包含完整功能)，專案資料夾名稱：vuetify-practice-Employees 。有任何指點或建議都可以在下方留言～🙏
👫 Thanks for joining.
