iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 10
0
Modern Web

Daily UI : 開發者版系列 第 10

Vuetify:Account Settings

  • 分享至 

  • xImage
  •  

https://codepen.io/hereiscasio/pen/mzKZzx?editors=1000

Used UI Component ( #2 )

#1 Avatars #2 Form inputs & controls > Textareas

UI 圖來源見

Discussion

雖然這張圖是以兩個 v-card 實作,但事實上,最外層的 v-card 可改成以 v-form 會更好,原因是這樣的:一般來說,使用者是否輸入資訊,資訊格式正確與否 . . . 都會影響到是否能點擊 Cancel 還是 Save 又或是這兩個按鈕在什麼情境不該出現 . . .( 這真要搞起來可很麻煩 ),而這種表單與按鈕的連帶關係,其實 v-form 已經幫你處理好了,我不使用 v-form 的原因就在於,希望你能夠自學 v-form 並改寫我本日範例

有幾個瑣碎的事值得稍微一提:我們再次使用到了 v-spacer,請注意我的使用方式。然後 v-avatar 支援變成方形,不是只能圓形


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

尚未有邦友留言

立即登入留言