Ionic Framework - Displaying multiple tabs

Question

I have been struggling to get a simple page working with multiple tabs. All the examples I find appear to only display one tab. I followed this video ( http://learn.ionicframework.com/videos/ion-tabs-directive/ ) that walks you through this process and actually has it displaying multiple tabs. I have a different setup but I followed the general steps and I only see one tab. What am I doing wrong?

Here is my base page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:sf="http://www.springframework.org/tags/faces">

    <head>
        <!-- Ionic Stylesheet -->
        <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.min.css"/>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />       
    </head>

    <body ng-app="starter">

        <ion-tabs class="tabs-positive">
            <ion-tab title="Home">
                <ion-header-bar class="bar-positive">
                    <h1 class="title">Home</h1>
                </ion-header-bar>   

                <ion-content>
                    <p>Home</p>
                </ion-content>
            </ion-tab>

            <ion-tab title="About">
                <ion-header-bar class="bar-positive">
                    <h1 class="title">About</h1>
                </ion-header-bar>           
                <ion-content>
                    <h1>About the app</h1>
                </ion-content>
            </ion-tab>

        </ion-tabs>

        <!-- ionic/angular/jquery  -->
        <script type="text/javascript" src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.min.js"></script>

        <!-- Bootstraps the application -->
        <script type="text/javascript" src="#{request.contextPath}/mobile/js/app.js"></script>  
    </body>
</html>

This is my app.js file

angular.module('starter', ['ionic'])
    .run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
        // Set the statusbar to use the default style, tweak this to
        // remove the status bar on iOS or change it to use white instead of dark colors.
        StatusBar.styleDefault();
        }
    });
});

This is what I end up outputting

Answer 1

<ion-view>
<ion-tabs class="tabs">
    <ion-tab title="" class="">
      <ion-content>
      </ion-content scrollbar-y="false">
    </ion-tab>
    <ion-tab title="" class="">
      <ion-content>
      </ion-content scrollbar-y="false">
    </ion-tab>
</ion-tabs>
</ion-view>

Ionic Framework - Displaying multiple tabs

Question

1 answers

solution1
0 2014-10-01 16:24:09

Ionic Framework - Displaying multiple tabs

Question

1 answers

solution1 0 2014-10-01 16:24:09

solution1
0 2014-10-01 16:24:09