iT邦幫忙

vuetify相關文章
共有 59 則文章

技術 [鼠年全馬] W33 - Vue出一個旅館預約平台(7)

這週繼續來做 [預約頁面] 回顧一下上週切的區塊 [標題] (已完成) [預約功能] [房間詳細] [Footer] (已完成) 這週來處理...

技術 [鼠年全馬] W32 - Vue出一個旅館預約平台(6)

因為上個月直接專注在 [iT邦鐵人賽] 直接好幾個禮拜都沒有刷 [鼠年全馬] 進度xD 這週回歸來做我們美美的旅館預約平台 #複習 來複習一下目前的進度...

鐵人賽 Modern Web
30天Vue出Google SSO 系列 第 29

技術 Day 29. F2E-完善過渡動畫

昨天後來在看效果時,有發現過渡動畫的元素已經完全超出卡片組件的範圍了,這個不是我們想要的效果 理想中的效果是要在卡片組件中完成,不能超出範圍 #加上進度條...

鐵人賽 Modern Web DAY 9
30天Vue出Google SSO 系列 第 22

技術 Day 22. F2E-帳戶清單

回到前端,要來接上帳戶清單資料囉!! #串接帳戶清單API 開啟前端(f2e)專案開始吧!! #Step 1 打開 /views/Index.vue 呼叫帳...

鐵人賽 Modern Web DAY 9
30天Vue出Google SSO 系列 第 20

技術 Day 20. F2E-頭像Menu

今天很開心的要回到前端的專案,要開始來完善首頁的部分!! 話說寫這篇在參考Vuetify官網時,突然發現它竟然改版了... 中文翻譯要登入才能用,而且版面變的...

鐵人賽 Modern Web DAY 9
30天Vue出Google SSO 系列 第 10

技術 Day 10. F2E-表單驗證

到昨天為止,基本的畫面已經完成了~ 今天會著重在程式邏輯,要來做 [輸入帳號] 及 [輸入密碼] 的表單驗證部分 因為還沒做到串接後端,所以都先使用假資料來驗...

鐵人賽 Modern Web DAY 9
30天Vue出Google SSO 系列 第 9

技術 Day 09. F2E-輸入密碼

今天進度目標要完成登入頁的 輸入密碼 頁~ #輸入密碼開發 其實 輸入密碼 頁,跟 輸入帳號 頁幾乎一樣 參考Google畫面 所以第一步... ctrl...

鐵人賽 Modern Web DAY 8
30天Vue出Google SSO 系列 第 8

技術 Day 08. F2E-選擇帳號

昨天漏個一個小地方沒有改到,就是我們卡片的 cardTitle 和 cardSubTitle 它還是寫死的xD 趕快來補一下作業~ #Step 1 打開 /v...

鐵人賽 Modern Web DAY 7
30天Vue出Google SSO 系列 第 7

技術 Day 07. F2E-輸入帳號

回顧一下,昨天有分析登入頁會有4個子頁: 輸入帳號 選擇帳號 輸入密碼 驗證身分 後面幾天會分別來把四個子頁的畫面做出來~那我們就開始吧!...

鐵人賽 Modern Web DAY 6
30天Vue出Google SSO 系列 第 6

技術 Day 06. F2E-登入頁開發

#頁面分析 應該9成9以上的人都有做過Google登入的動作吧? (沒有的趕快去試試看~) 在Google登入時,會有輸入帳號、輸入密碼、或是驗證等等頁面,在...

鐵人賽 Modern Web DAY 5
30天Vue出Google SSO 系列 第 5

技術 Day 05. F2E-首頁開發

今天要來實作首頁的部分 應該會有人覺得很奇怪,為什麼SSO會需要首頁? 做登入頁就好了吧? 需要首頁的原因是這樣的 你就做的跟Google一樣就好了!!...

鐵人賽 Modern Web DAY 3
30天Vue出Google SSO 系列 第 3

技術 Day 03. F2E-建立專案

今天目標是建立前端的專案以及介紹資料夾結構 至於過程中會使用到的如: Vue、Vuetify、Vue Cli會稍微帶過,但就不詳細介紹了 但會附上連結,怕看不...

鐵人賽 Modern Web DAY 2
30天Vue出Google SSO 系列 第 2

技術 Day 02. 專案規劃

在一個專案啟動前,都會先有一個專案規劃書或規格書 通常第一版會漏很多資訊,或是不合理的條件,然後慢慢的去修定版本 內容基本上會包含: 概述 專案簡介 目標...

鐵人賽 Modern Web DAY 1
30天Vue出Google SSO 系列 第 1

技術 Day 01. 前言

#為什麼選這個主題? Google SSO是在我上完六角學院的Vue課程之後做的第一個專案,會做這個專案的原因是由於公司的需要整合所有系統的登入入口,剛好就這...

技術 用 vuetify-loader 提升 Vue 開發體驗

好久沒寫文章,心血來潮發一篇 重點先放三遍 不用 Vuetify 也可以用 vuetify-loader 哦 不用 Vuetify 也可以用 vuetify-...

鐵人賽 Modern Web DAY 30
Daily UI : 開發者版 系列 第 30

技術 Vuetify:Google YoutubeMusic › Advanced Implementation

https://codepen.io/hereiscasio/pen/GRRKdxb 我們可能都遇過有些特殊的響應式設計情境或細節,需透過 JS 處理會更好,...

鐵人賽 Modern Web DAY 29
Daily UI : 開發者版 系列 第 29

技術 Vuetify:Google YoutubeMusic › Static Layout

https://codepen.io/hereiscasio/pen/VwZRmwy?editors=1010 Used UI Component ( #1...

鐵人賽 Modern Web DAY 28
Daily UI : 開發者版 系列 第 28

技術 Vuetify:Google Contact

https://codepen.io/hereiscasio/pen/dybLbVd?editors=1010 Used UI Component ( #3...

鐵人賽 Modern Web DAY 27
Daily UI : 開發者版 系列 第 27

技術 Vuetify:Google Domain

https://codepen.io/hereiscasio/pen/gOYEXjM?editors=1000 Used UI Component ( #1...

鐵人賽 Modern Web DAY 26
Daily UI : 開發者版 系列 第 26

技術 Vuetify:Google News › Advanced Implementation

https://codepen.io/hereiscasio/pen/eYOomxO?editors=1010 延續昨天的程式碼,今天專門介紹 Vue-port...

鐵人賽 Modern Web DAY 25
Daily UI : 開發者版 系列 第 25

技術 Vuetify:Google News › Static Layout

https://codepen.io/hereiscasio/pen/eYOomxO?editors=1010 Used UI Component ( #1...

鐵人賽 Modern Web DAY 24
Daily UI : 開發者版 系列 第 24

技術 Vuetify:Google Cardboard

https://codepen.io/hereiscasio/pen/dybrvBV Used UI Component ( #0 ) UI 圖來源見此 Di...

鐵人賽 Modern Web DAY 23
Daily UI : 開發者版 系列 第 23

技術 Vuetify:Google Fonts › Advanced Implementation

https://codepen.io/hereiscasio/pen/eYYOYVJ?editors=1010 跟之前做的 Google Alert 一樣,今...

鐵人賽 Modern Web DAY 22
Daily UI : 開發者版 系列 第 22

技術 Vuetify:Google Fonts › Static Layout

https://codepen.io/hereiscasio/pen/BaBMYEj Used UI Component ( #1 ) #1 Buttons:...

鐵人賽 Modern Web DAY 21
Daily UI : 開發者版 系列 第 21

技術 Vuetify:Google Alert › Advanced Implementation

https://codepen.io/hereiscasio/pen/gOYVXVy 為什麼說這個 Toolbar 特效很難?難就難在如何以既有的 Vueti...

鐵人賽 Modern Web DAY 20
Daily UI : 開發者版 系列 第 20

技術 Vuetify:Google Fonts › Static Layout

https://codepen.io/hereiscasio/pen/MWgLONL?editors=1000 Used UI Component ( #0...

鐵人賽 Modern Web DAY 19
Daily UI : 開發者版 系列 第 19

技術 Vuetify:Google Translate

https://codepen.io/hereiscasio/full/XWryZQO Used UI Component ( #3 ) #1 Tooltip...

鐵人賽 Modern Web DAY 18
Daily UI : 開發者版 系列 第 18

技術 Vuetify:Google Trend

https://codepen.io/hereiscasio/pen/ExYGOPr?editors=1010 Used UI Component ( #3...

鐵人賽 Modern Web DAY 17
Daily UI : 開發者版 系列 第 17

技術 Vuetify:File Upload Widget

https://codepen.io/hereiscasio/pen/RwbXVaR Used UI Component ( #3 ) #1 Progress...

鐵人賽 Modern Web DAY 16
Daily UI : 開發者版 系列 第 16

技術 Vuetify:About Card

https://codepen.io/hereiscasio/pen/VVYpNb Used UI Component ( #0 ) UI 圖來源見此 Dis...