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 11

[Day 11] Vue Quasar 打造 旅遊網站系列 7 - Parallax、Breadcrumbs、Rating

GitHub Demo 今天完成後的畫面 首頁部分已經差不多了 剩下頁尾以及一些小區塊 因為元件都跟之前的文章有重複到 故在這邊就不實作會功能重複的區塊了 製...

2018-10-25 ‧ 由 RenZhou 分享
DAY 12

[Day 12] Vue Quasar 表單元件 1 - Field

序 大家好,這篇開始就開始來談後端表單常用到的元件吧~ 原本的旅遊系列再來的頁面都是以layout為主 但是quasar的layout元件也差不多介紹完了 才發...

2018-10-26 ‧ 由 RenZhou 分享
DAY 13

[Day 13] Vue Quasar 表單元件 2 - Chips Input

輸入陣列的好幫手 Chips Input Chips Input 是不是有些時候建立使用者表單輸入時,會有能填多種值的欄位,像是興趣、職業等等。 但是又怕使用...

2018-10-27 ‧ 由 RenZhou 分享
DAY 14

[Day 14] Vue Quasar 表單元件 3 - Radio

簡單的單選元件 Radio Radio Quasar的Radio元件跟其他表單輸入元件的基本屬性都大同小異 一樣也可以用QFiled把它包裝起來哦 引入元件 f...

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

[Day 15] Vue Quasar 表單元件 4 - Checkbox

精巧而美的複選元件Checkbox Checkbox 今天的 Checkbox 跟昨天的Radio可以說是孿生兄弟 xD ?! 支援的屬性也都差不多~ 但是還是...

2018-10-29 ‧ 由 RenZhou 分享
DAY 16

[Day 16] Vue Quasar 表單元件 5 - Toggle

輕鬆做出一個切換鍵 Toggle Toggle 這個元件蠻輕鬆的,簡單的true跟false作切換~ 但除了一般拿來開關選項外,偶爾也會拿來控制表單顯示的內容哦...

2018-10-30 ‧ 由 RenZhou 分享
DAY 17

[Day 17] Vue Quasar 表單元件 7 - Option Group

選項元件直接打包一次做好Option Group Option Group 有時候要做一堆選項,是不是覺得要複製一大堆radio、checkbox很煩呢,所以我...

2018-10-31 ‧ 由 RenZhou 分享
DAY 18

[Day 18] Vue Quasar 表單元件 7 - Datetime

輕鬆變出時間日期輸入框Datetime 今天有一個表單要給使用者輸入基本資料 填著填著就來到了生日的欄位 這時候為了怕使用者格式亂填 在過去我們會去找datep...

2018-11-01 ‧ 由 RenZhou 分享
DAY 19

[Day 19] Vue Quasar 表單元件 8 - Editor (文章編輯)

內建的文章編輯器 Editor Editor (WYSIWYG) 有些後台需要讓使用者編輯文章,原本都會有點頭痛,又要去找插件來放了~~好在他也有內建的文章編輯...

2018-11-02 ‧ 由 RenZhou 分享
DAY 20

[Day 20] Vue Quasar 表單元件 9 - Knob (旋轉鈕?)

不知不覺就20天啦,感覺又回到了國高中的年代,每天都有作業要寫~有時候下班累得要死,還是要趕一篇出來 xD。文章寫到這個階段,整個框架的元件也都快介紹完了呢,不...

2018-11-03 ‧ 由 RenZhou 分享