OnsenUI | Working With UI Patterns

Written by on April 9, 2015

OnsenUI | Working With UI Patterns

Tab bar pattern

Tab bar pattern is usually seen in iPhone and iPad apps. Tab bar is displayed at the bottom of the page, or at the top if you want to simulate Android look and feel. It usually integrates icons and a text. This pattern is frequently used when you want to provide several features in the app. directive is used to display a tab bar.

Demo

Embeded working example:
OnsenUI Tab bar pattern

HTML
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.3.0/angular.js"></script>
  <script src="http://onsenui.io/OnsenUI/build/js/onsenui.js"></script>
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/topcoat-mobile-onsen-ios7.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">

  <ons-tabbar>
    <ons-tab page="page1.html" label="Page1" icon="ion-home" active="true"></ons-tab>
    <ons-tab page="page2.html" label="Page2" icon="ion-chatbox-working"></ons-tab>
    <ons-tab page="page3.html" label="Page3" icon="ion-ios-pricetag"></ons-tab>
    <ons-tab page="page4.html" label="Page4" icon="ion-ios-cog"></ons-tab>
  </ons-tabbar>

  <ons-template id="page1.html">
    <ons-toolbar>
      <div class="center">Page1</div>
    </ons-toolbar>

    <p style="padding-top: 100px; color: #999; text-align: center">Content goes here</p>
  </ons-template>

  <ons-template id="page2.html">
    <ons-toolbar>
      <div class="center">Page2</div>
    </ons-toolbar>

    <p style="padding-top: 100px; color: #999; text-align: center">Content goes here</p>
  </ons-template>

  <ons-template id="page3.html">
    <ons-toolbar>
      <div class="center">Page3</div>
    </ons-toolbar>

    <p style="padding-top: 100px; color: #999; text-align: center">Content goes here</p>
  </ons-template>

  <ons-template id="page4.html">
    <ons-toolbar>
      <div class="center">Page4</div>
    </ons-toolbar>

    <p style="padding-top: 100px; color: #999; text-align: center">Content goes here</p>
  </ons-template>

</body>

</html>
JavaScript
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('MainController', function($scope) {
  ons.ready(function() {

  });
});

Split view pattern

Split view pattern is usually used for larger screen devices like tablets, or when rotating display in horizontal. It can be even used for desktop browsers. It divides the screen into two columns and displays two separate pages. directive is used in this pattern. It also has capability to transform to a sliding menu pattern on smaller devices or displayed vertically.

Demo

Embeded working example:
OnsenUI Split view pattern

HTML
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.3.0/angular.js"></script>
  <script src="http://onsenui.io/OnsenUI/build/js/onsenui.js"></script>
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/topcoat-mobile-onsen-ios7.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">

  <ons-split-view var="app.splitView" secondary-page="secondary.html" main-page="page1.html" main-page-width="70%" collapse="width 500px">
  </ons-split-view>

  <ons-template id="secondary.html">
    <ons-page style="background-color: white; border-right: 1px solid #ddd;">
      <ons-list>
        <ons-list-item modifier="tappable" class="list__item__line-height" onclick="app.splitView.setMainPage('page1.html');">
          <i class="fa fa-home fa-lg" style="color: #666"></i>
          &nbsp; Page 1
        </ons-list-item>

        <ons-list-item modifier="tappable" class="list__item__line-height" onclick="app.splitView.setMainPage('page2.html');">
          <i class="fa fa-gear fa-lg" style="color: #666"></i>
          &nbsp; Page 2
        </ons-list-item>

      </ons-list>
    </ons-page>
  </ons-template>

  <ons-template id="page1.html">
    <ons-navigator>
      <ons-page>
        <ons-toolbar>
          <div class="center">Page1</div>
        </ons-toolbar>
        <div style="text-align: center; color: #999; padding: 60px 10px 10px 10px;">
          <p>This spitview collapses when the width is less than 500px.</p>

          <p>
            <a href="#" target="_blank" class="button button--light">Open Another Window</a>
          </p>
        </div>
      </ons-page>
    </ons-navigator>
  </ons-template>

  <ons-template id="page2.html">
    <ons-navigator>
      <ons-page>
        <ons-toolbar>
          <div class="center">Page2</div>
        </ons-toolbar>
        <p style="text-align: center; color: #999; padding-top: 100px;">
          Page2 Contents
        </p>
      </ons-page>
    </ons-navigator>
  </ons-template>

</body>

</html>
JavaScript
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('MainController', function($scope) {
  ons.ready(function() {

  });
});

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



Categories

Leave a Reply