iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 15
0
Modern Web

Daily UI : 開發者版系列 第 15

Vuetify:Add To

  • 分享至 

  • xImage
  •  

https://codepen.io/hereiscasio/pen/mzvMdy?editors=1010

Used UI Component ( #3 )

#1 Carousels, #2 Chips, #3 Chip groups

UI 圖來源見

Discussion

因我們主要專注在如何使用 Vuetify 元件搭配 FCC,所以若你打開源圖,會發現跟實作的圖有些微小差異,要做到完全一模一樣就真的要客製化 CSS 了,所以本日的重點是想告訴你:實務上拿到需實作的圖面若幾乎能靠 Vuetify + FCC ( 大概 90% 吧 )搭配少量的客製化 CSS,這是最理想的情況,次之的就像本日所提供的範例,要做到跟源圖完全相同,還需要做很多細微的調整

目前在 Vuetify 元件庫中,並沒有像源圖右上方那種按鈕樣式,但我還是在幾乎不加客製化 CSS 的情況下做到了,請先別看我的程式碼,自己想想看到底要怎麼做( 當然,這需要你足夠熟悉 Vuetify 到一定程度,這確實已經非常進階,新手遇到這種情況,可能馬上就舉手投降開始客製化 CSS 了 )


上一篇
Vuetify:Calories Calculator
下一篇
Vuetify:About Card
系列文
Daily UI : 開發者版30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言