純紀錄：近代風格UI(紙UI)

目錄

簡介

這篇文章是純紀錄。
這是大約兩年前做的東西，因為那時候Google剛開始做平面風格，我就參考了他的數字和外觀做了一系列的UI。
這裡只是個人練習紀錄，如果要使用的話請去用Google官方釋出的 Material Design 。
因為Google把那種標籤取了一個前綴叫「paper」，所以我也叫他紙UI。

如果效果不如預期就請換或更新瀏覽器吧，在最新版的Chrome上是沒問題的。

註記

從舊時代遷移過來之後 Live Demo 還沒做好，以下示範都是空的是正常現象，待日後解決。

紙按鈕(paper-button)

在CSS和JS掛上來後使用以上程式就可以在頁面載入時做成紙按鈕。

變種紙按鈕(paper-ripple-button)

在CSS和JS掛上來後使用以上程式就可以在頁面載入時做成變種紙按鈕。

紙輸入(paper-input)

在CSS掛上來後以上結構就會變成紙輸入。

紙進度(paper-progress)

示範：
進度65%時：

在CSS掛上來後以上結構就會變成紙進度(初始化中狀態)。

在CSS掛上來後以上結構就會變成紙進度(65%的實際進度，80%的預載進度)。

不知道叫什麼的選單(md-select-wrapper)

示範：

在CSS掛上來後以上結構就會變成md-select-wrapper。
但顯示中文好像高度會有點問題？

以上是所有平面UI的記錄。

在寫完之後才發現各個js和css的內容命名狂衝到啊，不寫這文章還沒發現。

隨機推薦文章