Iron Man Day 22 - OnsenUI

by Sheng Huang Huang

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.4/css/onsenui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.4/css/onsen-css-components.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.4/js/onsenui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.4/css/font_awesome/css/font-awesome.min.css">
<ons-page>
  <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>

  <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>
</ons-page>

CSS

body {
  margin: 5px;
}