iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
0
Modern Web

Daily UI : 開發者版系列 第 12

Vuetify:Credit Card Payment

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

Used UI Component ( #2 )

#1 Subheaders, #2 Select, #3 dialog

UI 圖來源見

Discussion

你或許可能覺得:「 Vuetify 幹嘛連 Subheader 這種超簡單的東西也要特別搞個專屬的 Component ? 」,我想此處關鍵不在於它簡單與否,而是常用與否,Subheader 在列表或是卡片這類組件上很常使用,所以就被規格化了。本日我能想到比較有趣的地方在於:請移除所有的 hide-details,然後看看發生了什麼事,並問自己為什麼( 因為這對版面結構有較大影響,若你事先不知道這個屬性,可能就會為了移除一些 "跑版",寫了一堆客製化 CSS )

至於為何會用 v-dialog,一樣就是看你怎麼看待這個圖面,我直覺這種畫面出現時,通常都是先按了什麼東西,然後 "跳出來",就像 dialog 一樣,值得一提的是,就是因為用了 v-dialog,我們不再需要透過 <v-row justify='center' align='center'>,嘗試把此卡片垂中水平置中,因為這就是 v-dialog 的預設


上一篇
Vuetify:Crowdfunding Card
下一篇
Vuetify:What is your budget ?
系列文
Daily UI : 開發者版30

尚未有邦友留言

立即登入留言