https://codepen.io/hereiscasio/full/XWryZQO

Used UI Component ( #3 )

#1 Tooltips #2 Footer, #3 Menus

UI 圖來源見此

Discussion

本日要探討的部分有二：第一個是把滑鼠懸浮到鍵盤 icon 上會出現 Tooltip，而且點擊該 icon 還會出現 Menus：要達到這種效果說起來簡單，你若不懂 Vuetify 的 API，實際上也做不出來，但這部分官方文件有專門討論的 Example，就不在此細講了。

第二部分為 Footer，這有什麼好講的呢？因為畢竟看一看相關文件就會用了，但其實這樣恰恰不夠，需達到能以 FCC 角度看問題的方式：能夠辨識出目標 UI 圖上哪些是 Footer。是這樣的，當你學了一大堆 Vuetify 元件時，並且想要開始仿製本日頁面時，圖面上最下方的三個類似按鈕的東西，你會怎麼排？可能你根本想不到要使用 Footer ! 也正是你若想不到，想改用別的元件實作時，可能就會發現要加一堆 hack，聽起來平鋪直敘的一句話，我想若你有機會遇到類似的開發情境，痛一次就知道我在說什麼了ＸＤ