iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
0
Modern Web

Daily UI : 開發者版系列 第 18

Vuetify:Google Trend

  • 分享至 

  • xImage
  •  

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

Used UI Component ( #3 )

#1 Bars > App bars, #2 Application, #3 Hover

UI 圖來源見

Discussion

從今天開始,仿製對象都是 Google 的產品頁面*,其複雜度大多為中上等級,實作細節過多,一般只會介紹較特別的排版方式,若有需要,會排一些涉及動態的版面,但會改在隔天予以實作

Vuetify 之所以強大,是因為它們不只單單提供 UI 組件,有些常見的特效還會實作並規格化( 請至 Bars > App bars 的頁面看完所有 Examples,你就會懂我在說什麼 )。本日實作的對象雖然只是靜態頁面,不過請仔細觀察 Toolbar 在滾動滾輪後的特效。此效果純粹是被 Vuetify 規格化的功能。

值得一提的是 appv-content 的使用方式;這是 Vuetify 中超級重要、超級好用、方便的功能,請觀察以下的 psuedo code:因為 v-app-bar 是採絕對定位,這意味它會蓋掉離它最近的 sibling 元件一部分,此例中,sibling 元件即 v-content,但因為我們在 v-app-bar 上使用了 app,這會請 Vuetify 幫我們把這兩個元件調整成我們心中想要的組合方式,也就是 v-content 並不會被 v-app-bar 遮到!

<v-card>
    <v-app-bar app absolute ...>
    <v-content>
    ...
    </v-content>
</v-card>

*有些頁面非產品,只是用於介紹它們自家產品的網頁


上一篇
Vuetify:File Upload Widget
下一篇
Vuetify:Google Translate
系列文
Daily UI : 開發者版30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言