iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站 系列

Quasar是一款基於 Vue.js 的UI Framework 。有別於一般的UI框架,Quasar 除了擁有Material Design及 iOS風格的 Components 外,還能輕鬆將整個網站打包成Progressive Web App、Electron、Cordova等等應用 。在接下來的三十天中,將由小弟我來為各位一一介紹這個Framework所帶來的強大功能。

鐵人鍊成 | 共 30 篇文章 | 55 人訂閱 訂閱系列文 RSS系列文
DAY 21

[Day 21] Vue Quasar 彈跳視窗 1 - Action Sheet

下方的彈出選單 Action Sheet Action Sheet 這是一個從螢幕下方彈跳出小選單的元件 在Android及iOS上也都有類似的原生元件 不過如...

2018-11-04 ‧ 由 RenZhou 分享
DAY 22

[Day 22] Vue Quasar 彈跳視窗 2 - Dialog

就用這個取代傳統alert吧 Dialog Quasar的dialog也是做得跟手機原生的很像,一樣也是material及iOS兩種風格喔。基本上裡面除了放文字...

2018-11-05 ‧ 由 RenZhou 分享
DAY 23

[Day 23] Vue Quasar 彈跳視窗 3 - Modal

眾所週知的彈跳視窗 Modal Modal 看到這個名字,有玩過Bootstarp的同學應該都不陌生,沒錯就是以前的那個modal啦,在Quasar有這麼多彈跳...

2018-11-06 ‧ 由 RenZhou 分享
DAY 24

[Day 24] Vue Quasar 彈跳視窗 4 - Notify

輕巧不煩人的提醒視窗 Notify Notify 提醒如何做到不煩人,又能有實際的效果呢? 假設我們今天做存檔的動作,要怎樣快速的顯示我們已經保存好了呢? 透過...

2018-11-07 ‧ 由 RenZhou 分享
DAY 25

[Day 25] Vue Quasar 進度條 1 - Ajax Bar & Loading Bar

第25天,感覺很快就要結束了呢~ 輕鬆放上載入進條 Loading Bar 今天雖然有兩個題目,不過一個是元件一個是插件,在功能上大致上都一樣,兩個都會在有ge...

2018-11-08 ‧ 由 RenZhou 分享
DAY 26

[Day 26] Vue Quasar 進度條 2 - Inner Loading (內容讀取)

區塊內的讀取 Inner Loading Inner Loading 有些時候會重新載入一些區塊,像是複雜的表格等等,這時候就可以用這個元件讓他看起來是在讀取啦...

2018-11-09 ‧ 由 RenZhou 分享
DAY 27

[Day 27] Vue Quasar 來談談 CSS Helpers

Day27,差不多要來收尾啦,元件的介紹也都差不多了,現在就來介紹一些quasar內建的CSS Helper吧~ 這邊對後端工程師來說可能比較吃力,畢竟都是頁面...

2018-11-10 ‧ 由 RenZhou 分享
DAY 28

[Day 28] Vue Quasar 自訂顏色

抱歉今天比較忙,內容可能會比較少,敬請見諒 自訂顏色 設定元件顏色color時我們都會去找 Color Palette 看看有沒有喜歡的顏色,在複製來用。 那萬...

2018-11-11 ‧ 由 RenZhou 分享
DAY 29

[Day 29] Vue Quasar 多國語系 I18n

今天來談談多國語系I18n,能夠讓你輕鬆將網站的內容替換成其他語言。 那為什麼叫做I18n這個奇怪的名字? 其實就是Internationalization的,...

2018-11-12 ‧ 由 RenZhou 分享
DAY 30

[Day 30] Vue Quasar 一些小心得

終於三十天拉~(撒花 關於這三十天 雖然後半段都沒寫太詳細,也蠻多都是壓線快十二點才交卷,身捲專案實在是沒很多時間,到後面都覺得有點肝,不愧是鐵人賽XD,本來一...

2018-11-13 ‧ 由 RenZhou 分享