[Vuetify] 套用 UI Library

此次使用 Vuetify 的目的是使用看看 UI Library，嘗試不用 CSS 直接做出目標畫面。

使用 Text fields

官網資源：https://vuetifyjs.com/en/components/text-fields/

可以在官網找到許多不同的樣式模板：

點擊 <> 可以看到 <template> 和 <script>。

點擊右上角的 Github 小圖可以去看完整的程式碼。

API

除了基本的套用之外，還可以點進網頁中的 API：https://vuetifyjs.com/en/api/v-text-field/，看更多的使用方法。

只需要在 <v-text-field> 加上需要的屬性，就能看到畫面上的改變。

例如
希望輸入欄有外框（outlined），且高度跟字體合適（dense），不要有下方的 <v-text-field＿＿details> 空間（hide-details）：

就可以做出符合目標的畫面了🥳

Color

另外筆記色彩的客製化方法，官網：https://vuetifyjs.com/en/styles/colors/#material-colors

可選擇自己想要的色彩，使用方法是在需要客製化色彩的 tag 加上 class 屬性，例如 class="red lighten-5" 。

字體

官網資料：https://vuetifyjs.com/en/styles/text-and-typography/#typography

用法一樣是在要客製化的 tag 加上 class 屬性，class="text-{value}”。

例如

• 想要是 h5 的字體：class="text-h5
• 想要粗體：class="font-weight-bold"

class 後面的值要帶什麼，可以去官網看。