iT邦幫忙

DAY 27
0

使用 EZoApp 開發 App 好好玩系列 第 27

Day 27 - EZoApp Polymer 元件介紹 (2)

昨天看過了 EZoApp Polymer 元件裏頭,與排版比較相關的元件之後,今天要來看的是與按鈕比較有關的元件,明天會繼續介紹一些第三方的 Polymer 元件,也因為有了這些出色元件,可以讓整體的畫面更加生動有趣。

1. paper-checkbox

http://jqmdesigner.appspot.com/designer.html#&ref=5198125358645248
顧名思義就是 checkbox,不過由於是 Polymer 元件裏頭的 Paper Elements ( 參考:https://www.polymer-project.org/docs/elements/ ),所以具備的效果自然不在話下,點選除了 ripple 的效果,配色與動態也都相當的不錯,點選的時候正方框會動態的變成勾勾喔。

 <paper-checkbox label="click me" role="checkbox" tabindex="0" aria-checked="false" aria-label="click me"></paper-checkbox>


2. paper-radio-group

http://jqmdesigner.appspot.com/designer.html#&ref=5109901361676288
和 checkbox 互為兄弟的 radio button,不過這裡其實是個 radio button 的集合 ( group ) 畢竟不同於 checkbox,radio button 是單選的按鈕,不可能只有一顆 ( 只有一顆的話就用 checkbox 就好了 ),所以這裡其實是用一個 radio group 把 radio button 包在裡頭,點選也會有漂亮的配色與 ripple 效果。

    <paper-radio-group selected="small" role="radiogroup">
      <paper-radio-button name="small" label="Small" role="radio" tabindex="0" aria-checked="false" aria-label="Small"></paper-radio-button>
      <paper-radio-button name="medium" label="Medium" role="radio" tabindex="0" aria-checked="false" aria-label="Medium"></paper-radio-button>
      <paper-radio-button name="large" label="Large" role="radio" tabindex="0" aria-checked="false" aria-label="Large"></paper-radio-button>
    </paper-radio-group>


3. paper-toggle-button

http://jqmdesigner.appspot.com/designer.html#&ref=5748183699292160
這個元件本質上就是一個開關的元件,要把這個元件看成 flipswitch 元件也不為過,不過因為是 Polymer 的 Paper elements,所以整體質感當然就美多了哈哈

    <paper-toggle-button touch-action="pan-y" role="button" aria-pressed="false" tabindex="0"></paper-toggle-button>

4. paper-item

http://jqmdesigner.appspot.com/designer.html#&ref=6324025265487872
有點類似清單的元件,而且可以借由屬性面板來更換 icon,icon 的風格都是 Material Design 的風格

    <paper-item label="Item" icon="settings" horizontal center layout></paper-item>
        <paper-item label="Item" icon="settings" horizontal center layout></paper-item>

5. paper-slider

http://jqmdesigner.appspot.com/designer.html#ref=5739303049101312
很酷的一個拉霸元件,除了華麗的點選與拖拉效果,還可以自定區間,樣式上就會自動產生格點,而且還可以選擇一個 pin,就會在拖拉的時候冒出一個數值提示的泡泡,真的很酷呀!

 <paper-slider min="10" max="200" value="110" editable></paper-slider>

6. paper-fab

http://jqmdesigner.appspot.com/designer.html#&ref=5644868005134336
paper-fab 是一個會浮動在畫面上的按鈕,通常這個按鈕都會是最主要的功能,例如在通訊錄裡頭,就會放個 + 號,在 Google Driver 裡頭,就會是新增文件之類的。

    <paper-fab class="mini" icon="arrow-forward" role="button" tabindex="0" aria-label="arrow-forward"></paper-fab>

7. paper-icon-button

http://jqmdesigner.appspot.com/designer.html#&ref=4916650381934592
顧名思義,就是利用 Material Design 風格的 icon 作為按鈕。

<paper-icon-button icon="favorite" role="button" tabindex="0" aria-label="favorite"></paper-icon-button

主要的 EZoApp Polymer 元件大概介紹到這邊,明天將繼續介紹一些很有趣的第三方元件。


上一篇
Day 26 - EZoApp Polymer 元件介紹 (1)
下一篇
Day 28 - EZoApp 超級有趣的客製化元件
系列文
使用 EZoApp 開發 App 好好玩30

尚未有邦友留言

立即登入留言