iT邦幫忙

DAY 11
1

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

使用Polymer也要顧門面 (Layout)

今日目標: 學習 Polymer Layout各種使用方式

Polymer提供了聲明式的佈局宣告,是基於 CSS Flexbox 建構而成,透過Polymer加持,可以在 element上面設定屬性就完成佈局。這方便的實作是寫在 layout.html ,所以只要有使用到任何自定標籤就可以用。

這篇我是邊看官網教學邊做範例,想知道更多更詳細的教學請看 這裡

下面的範例為了快速測試,我直接用EZoApp線上工具進行測試,本機沒有安裝Polymer環境,而想要試玩的可以直接到 這裡

首先我們先準備好幾個 <div> 並加上邊框,方便等下加上layout是觀看效果

左邊是網頁顯示結果,右邊是html 寫法

Horizontal 和 Vertical Layout

layout 搭配 (start center end) 屬性

當在元素上加上layout屬性後,立馬就成為 flex 容器,我們可以選擇水平(Horizontal) 或 垂直(Vertical) 佈局方式,另外我們還可以直接在 flex 容器上,設定 start 或 center 或 end 來決定容器內元素的擺放位置,如果不設定的話,預設容器內的元素會自動撐大到垂直佈局寬度或水平佈局的高度

flex 搭配 (one , two , three) 屬性

在 flex 容器內的元素,可以加上 flex 來進行空間分配,分配權重可以直接用 one , two , three 來表示分配權重,相當簡潔易懂

先來看水平佈局加上 Flex 分配權重的Demo

Horizontal Layout + Flex

再來是垂直佈局加上 Flex 分配權重的Demo

Vertical Layout + Flex

Justification

在flex容器或內部元素,可以搭配 *-justified 來控制,可以參考這篇的解釋

vertical layout start

vertical layout center

vertical layout end

vertical layout start-justified

vertical layout center-justified

vertical layout end-justified

另外還有 Self alignment , wrap 等屬性,由於都是設定就有效果,所以請直接參考官網吧 XD

好了,現學現賣。學了一些佈局技巧,就讓我們將前天的範例加上佈局吧~

[線上範例動手玩]

這範例加上了控制水果籃佈局方式 (垂直或水平擺放水果位置 @@a )

[Github]

第22~25行 用來產生toggle-button也就是下面這個元件,當按下時,呼叫layout function

第27行 水果籃元件加上了 layout屬性,所以只要添加 vertical 就變成垂直佈局了

第29~36行 判斷目前是否切換成垂直佈局,是的話進行處理

實際玩看看可以發現,改 layout只是設定元素屬性,很直覺方便 ^^


上一篇
用RWD讓悟空變身
下一篇
來點實際應用 - 出英文考題
系列文
你不能不知道的Polymer開發實戰30

尚未有邦友留言

立即登入留言