iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
0
Modern Web

Daily UI : 開發者版系列 第 21

Vuetify:Google Alert › Advanced Implementation


https://codepen.io/hereiscasio/pen/gOYVXVy

為什麼說這個 Toolbar 特效很難?難就難在如何以既有的 Vuetify 元件達到這種效果,而不是自己加一堆客製化 CSS( 那樣就沒什麼好說了 ),這個 Toolbar 特效在處理上之所以麻煩,原因是往上滑動時,要求不讓整個 Toolbar 都消失,而是留下一部分,為了達到這個目的,就不適合使用 app 搭配 v-content 了,因為這兩個東西搭在一起時,無法做到對彼此位置的動態調整

什麼意思呢?因為我們需要在滾動時,Toolbar 與其下方內容的相對位置仍然保持跟沒滾動前的狀態是一樣的。好在 Toolbar 有個屬性 hide-on-scroll 可以做到在滾動後,還會留下 Toolbar 的一部分,而這部分被稱為 extension。此外,為了達到這個特效,不能再使用 <v-app-bar-nav-icon><v-toolbar-title>,原因無它,就是你若真用這兩個標籤,我想是不可能達到目的的,至少會付出很多代價( i.e. 客製化一堆 CSS )


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

尚未有邦友留言

立即登入留言