iT邦幫忙

DAY 27
2

你不能不知道的Polymer開發實戰系列 第 27

Material Design - 案例研究(HTML結構)

今日目標: 深入了解Polymer官網的計算機案例

[線上試玩]

Polymer官網使用了Material Design開發兩個應用範例,充分展現了組裝元件式開發的精髓。深入了解計算機應用,掌握元件的特性,就可以在其他開發中派上用場,更可以從中學習一些元件運用技巧,就讓我們開始吧!

https://www.polymer-project.org/

計算機應用 [線上試玩]

  1. 畫面長相

計算機組成元件

計算機主要由上方的output元件(顯示元件)、下方的keypad元件(鍵盤元件)組成。

顯示元件 (paper-calculator-output.html)

先了解顯示元件,顯示元件沒有JS,完全用CSS Layout進行顯示。顯示分成兩種,分別為運算顯示、結果顯示,如下圖

  1. 元件畫面

鍵盤元件 (paper-calculator-keypad.html)

鍵盤元件由主面板(outerPanels)包含可拖動隱藏面板(innerPanels) 組合而成,面板內再分別擺放 keygrid元件顯示指定按鍵種類

  1. 元件畫面結構

panels元件右側綠色那塊也是panels元件,可以用手指觸控拉出

面板元件 (paper-calculator-panels.html)

panels元件裡面的左側由兩塊keygrid元件組成,每個keygrid元件可以放一群按鍵,每個按鍵就是一個key元件,主要是用功能來區分。例如左邊的keygrid元件裡面放的是數字鍵,右邊的keygrid元件裡面放的是運算按鍵 ( + - x ÷ )

  1. 元件畫面結構

經過上面圖解後,整個計算機是由下面6個元件組合成一個計算機應用

paper-calculator.html

-- paper-calculator-output.html

-- paper-calculator-panels.html

-- paper-calculator-keypad.html

-- paper-calculator-keygrid.html

-- paper-calculator-key.html

-- paper-calculator-math.html

以上只有 paper-calculator-math 不是可視元件,它只是用來輔助數學運算

paper-calculator-math.html

待續...


上一篇
Material Design - 對話框
下一篇
Material Design - 自適應(RWD)鍵盤,有這種事?
系列文
你不能不知道的Polymer開發實戰30

尚未有邦友留言

立即登入留言