iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0
Modern Web

Daily UI : 開發者版系列 第 19

Vuetify:Google Translate

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,聽起來平鋪直敘的一句話,我想若你有機會遇到類似的開發情境,痛一次就知道我在說什麼了XD


上一篇
Vuetify:Google Trend
下一篇
Vuetify:Google Fonts › Static Layout
系列文
Daily UI : 開發者版30

尚未有邦友留言

立即登入留言