iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
0
Modern Web

Daily UI : 開發者版系列 第 13

Vuetify:What is your budget ?

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

Used UI Component ( #1 )

#1 Silder

UI 圖來源見

Discussion

<div class="triangle triangle-top-right"></div>
<div class="triangle triangle-top-left"></div>
<div class="triangle triangle-bottom-left"></div>
<div class="triangle triangle-bottom-right"></div>

打開 Codepen 後,你會發現我客製化了一大串 CSS,這是為了實作出上圖你所看到的詭異背景( 主要是指有三角形的東西 ),遇到這種奇怪的 UI,就別想 FCC 了,就連三角形對應到的標籤,也直接使用 div 就行,不用特別硬要找個 Vuetify 的元件予以替代

今天同樣是持續鍛鍊整合使用 Grids + 一些底層 Component( 範例中我用的是 v-sheet )搭配 Vuetify 官網中的章節 Stylies & animations 內雜七雜八的 API。或許看我文章到了第 11 天,你會想說:「 Vuetify 官網就一堆 Examples,我看它的不就好了? 」,這樣想是沒錯,只是看我寫的程式碼,你會發現我不斷嘗試 FCC,並且靠各種各樣的方式組合出目標 UI,16 天前的教學中所有程式碼細節你都能看懂,並且能自己查找文件,那等到第 16 天開始,對於我們所嘗試仿製的 Google 產品 UI、這些具一定複雜的圖面,你就應能配合官方文件自行開發


上一篇
Vuetify:Credit Card Payment
下一篇
Vuetify:Calories Calculator
系列文
Daily UI : 開發者版30

尚未有邦友留言

立即登入留言