iT邦幫忙

DAY 26
0

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

Day 26 - EZoApp Polymer 元件介紹 (1)

看完了如何串接後端之後,或許會發現界面上其實都還沒有設計得很完善,畢竟在開發流程上,UI 的設計往往也占了開發超過一半的時間,因此,最後這幾天就來介紹一下 EZoApp 也支援的 Polymer 元件,也因為有了 Polymer 元件,讓界面更加美觀豐富,不過這裡不會介紹太深入的 Polymer.js,如果真的很想了解 Polymer.js ,可以參考這次已經完成鐵人賽的 Marty 大大 Polymer 文章 ( http://ithelp.ithome.com.tw/ironman7/app/article/dev/recent/10160751 ),有非常豐富且完整地介紹喔!但很可惜的只支援最新的 Android 系統 ( 4.3 or 4.4 以上 ),因此要實際派上用場可能還要等等。

1. paper-tabs

( 點選 preview 預覽:http://jqmdesigner.appspot.com/designer.html#&ref=5155057574084608 )
與 navtab 很類似,就是幾個一組的按鈕,點選時會有 material design 的 ripple 特色效果,程式碼也很容易理解,就是 paper-tabs 裏頭包著 paper-tab,有點類似 ul 裏頭包著 li,比較有意思的是,可以設定「select」,0 代表第一個,1 代表第二個,依此類推。

    <paper-tabs role="tablist" selected="2">
      <paper-tab role="tab">TAB 1</paper-tab>
      <paper-tab role="tab">TAB 2</paper-tab>
      <paper-tab role="tab">TAB 3</paper-tab>
    </paper-tabs>

2. core-toolbar

( 點選 preview 預覽:http://jqmdesigner.appspot.com/designer.html#&ref=5643249058316288 )
這個元件放上設計畫面之後,就等於幫你設計完成了一個具有工具列的 header ,也因為這樣所以名稱叫做 toolbar ,點選按鈕也都會有 ripple 的效果,相當的有意思,而且 polymer 元件還提供了非常多的 icon 可以選擇,超棒 der!( 從屬性面板就可以選擇 )

    <core-toolbar style="background: #4285f4;">
      <paper-icon-button icon="menu" role="button" tabindex="0" aria-label="menu"></paper-icon-button>
      <span flex>Title</span>
      <paper-icon-button icon="refresh" role="button" tabindex="0" aria-label="refresh"></paper-icon-button>
      <paper-icon-button icon="more-vert" role="button" tabindex="0" aria-label="more-vert"></paper-icon-button>
    </core-toolbar>


3. core-scaffold

( 點選 preview 預覽:http://jqmdesigner.appspot.com/designer.html#&ref=5722077009018880 )
還記得 EZoApp 隱藏元件 slider panel 嗎?core-scaffold 元件提供了一個點選後從左側展開的選單,不需要又像 slider panel 自己撰寫,只需要把元件拉進來就可以囉!而且這個元件比較特別的地方,很像是已經幫我們產生好了一整個樣板,直接在上面編輯,就有 header、slider panel、content...等效果。

    <core-scaffold>
      <core-header-panel mode="seamed" navigation flex>
        <core-toolbar></core-toolbar>
        <paper-item label="Item1" icon="settings" horizontal center layout></paper-item>
        <paper-item label="Item2" icon="settings" horizontal center layout></paper-item>
      </core-header-panel>
      <div tool>Title</div>
    </core-scaffold>


4. core-list

( 點選 preview 預覽:http://jqmdesigner.appspot.com/designer.html#&ref=5664864018104320 )
顧名思義就是清單的元件,不過這個清單都加上了 ripple 的效果 ( Material Design 就是以這個效果取勝啦! ),而 EZoApp 的 core-list 元件還可以串接 json 資料,因為他有
{{}} 的符號呀!而且從 JS code 裏頭可以發現吃的就是 json 檔案,如果忘記怎麼串接的,趕快回頭複習一下喔!

元件 HTML:

    <core-list id="list" data="{{data}}" style="height:320px;border:1px solid">
      <template>
        <paper-item class="item" style="height:100px" label="{{name}}">{{time}}
          <br>{{details}}</paper-item>
      </template>
    </core-list>

元件 JS:

$(document).on("polymer-ready", function () {
  list.data = [{
    name: "aaahfyyw",
    time: "8:29 pm",
    details: "PARKOUR!"
  }, {
    name: "aaam",
    time: "8:29 pm",
    details: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
  }, {
    name: "aabkch",
    time: "8:29 pm",
    details: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
  }, {
    name: "aacdfqrp",
    time: "8:29 pm",
    details: "PARKOUR!"
  }];
});

元件CSS:

core-list {
  height: 100%;
}
core-list .item {
  box-sizing: border-box;
  height: 80px;
  border-bottom: 1px solid #ddd;
  padding: 4px;
  cursor: default;
  background-color: white;
  overflow: hidden;
}

5. paper-menu-button

( 點選 preview 預覽:http://jqmdesigner.appspot.com/designer.html#&reg=5745112260804608 )
這個元件很單純,就是一個 menu 的按鈕元件,點選就會跳出一個清單選項

<paper-menu-button icon="menu" tabindex="0">
      <div>Menu Item 1</div>
      <div>Menu Item 2</div>
      <div>Menu Item 3</div>
    </paper-menu-button>

6. paper-button

( 點選 preview 預覽:http://jqmdesigner.appspot.com/designer.html#&ref=6513574855835648 )
這就是一個 Material Design 風格的按鈕元件,可以透過屬性面板 icon 的選擇添加 icon,同時也是具有 ripple 的效果喔!

    <paper-button label="flat button" role="button" tabindex="0" aria-label="flat button" class="paper-shadow-animate-z-1-z-2" icon="account-box"></paper-button>


7. paper-input

( 點選 preview 預覽:http://jqmdesigner.appspot.com/designer.html#&ref=5707224475238400 )
Material Design 風格的 input 元件,點選輸入的時候會有頗炫的 ripple 效果,這種效果也是一般的 input 所做不到的,真期待未來可以普及呀!

<paper-input label="Type Something..." multiline></paper-input>

之後會繼續介紹 EZoApp 裏頭的 Polymer 元件。


上一篇
Day 25 - EZoApp 串接 Parse
下一篇
Day 27 - EZoApp Polymer 元件介紹 (2)
系列文
使用 EZoApp 開發 App 好好玩30

尚未有邦友留言

立即登入留言