之前我們曾經就紹過Bootstrap這類的UI Framwork，目的是快速打造具有基本且通一的UI，並且支援RWD，不管是desktop或mobile瀏覽器都可以使用，而有時候我們可能不需要顧慮這麼多，只需要專注在mobile平台就可以了，這時候Onsen UI就是非常適合使用的UI Framework了。

關於Onsen UI

Onsen UI是一款專注在mobile web上的UI Framework，目前已經出到第2版，由於專注在mobile web上，因此除了做手機版網頁外，也很適合拿來在cordva這類的mobile web app中使用，使用Onsen UI建立的網頁能夠看起來就會像我們一般手機APP的使用經驗一樣。

Onsen UI可以隨著使用的手機平台(Android、iOS)來調整顯示的方式，讓APP上架時更加符合相關的UI設計準則；更棒的是，它預設支援了目前主流的前端框架(Angular 1、Angular 2、React、Vuew.js、Meteor)，對於已經使用這些框架的開發人員來說，能夠以更加習慣的方式上手！

開始使用Onsen UI

雖然Onsen UI支援各種前端框架，但為了不要把問題複雜化，我們還是使用最基本的方式來進行開發，儘管如此，Onsen UI依然可以在不使用這些框架的情況下使用Web Component的概念來開發，使用上變得非常簡單。

首先先載入必要的onsenui.css、onsen-css-components.css和onsenui.js，接著在頁面中我們可以在body中直接使用<ons-page>來建立一個基本的頁面

  <ons-page>
    Hello World!!
  </ons-page>

很簡單吧！接下來我們也可以加入APP中常見的toolbar

  <ons-toolbar>
    <div class="left">
      <ons-back-button>上一頁</ons-back-button>
    </div>
    <div class="center">歡迎光臨</div>
    <div class="right">
      <ons-toolbar-button>
        <ons-icon icon="md-menu"></ons-icon>
      </ons-toolbar-button>
    </div>
  </ons-toolbar>

再加個清單的Component

  <ons-list>
    <ons-list-header>主餐</ons-list-header>
    <ons-list-item>咖哩飯</ons-list-item>
    <ons-list-item>牛排</ons-list-item>

    <ons-list-header>飲料</ons-list-header>
    <ons-list-item>可樂</ons-list-item>
    <ons-list-item>紅茶</ons-list-item>
    <ons-list-item>雪碧</ons-list-item>
  </ons-list>

結果畫面如下：

看起來是不是就有模有樣啦！

程式碼DEMO: https://jsfiddle.net/wellwind/mbonso94/

關於更多Onsen UI的元件使用可以參考: https://onsen.io/v2/docs/js.html

類似資源

• Framework7：另一款以mobile web為主的UI Framework，內建的Component比Onsen UI多，缺點是不像Onsen UI可以用更直覺的web component方式來使用。

文章同步發表於: https://dotblogs.com.tw/wellwind/2016/12/22/front-end-onsen-ui

不正經閒聊

Mobile UI變得好簡單啊！