Onsen UIを使用してアプリの作成しています。
トップページはタブバーを表示させないで、それ以外のページにタブバーを表示させたいと思っています。
トップページはhide-tabsを使用してタブバーを非表示にしたのですが、非表示にしたタブバーを表示するにはどうしたらよいでしょうか?
非表示
宜しくお願いします。
うーん、こんな感じなんですかね。
ons.bootstrap().controller('MainCtrl', function($scope) {
$scope.hide = true;
$scope.push = function() {
myNavigator.pushPage('new_page.html');
$scope.hide = false;
}
$scope.pop = function() {
myNavigator.popPage();
$scope.hide = true;
}
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>
<body ng-controller="MainCtrl">
<ons-tabbar var="tabbar" hide-tabs="{{hide}}">
<ons-tabbar-item
icon="home"
label="Home"
page="navigator.html"
active="true"></ons-tabbar-item>
<ons-tabbar-item
icon="comment"
label="Comments"
page="page2.html"></ons-tabbar-item>
<ons-tabbar-item
icon="gear"
label="Settings"
page="page3.html"></ons-tabbar-item>
</ons-tabbar>
</body>
<ons-template id="navigator.html">
<ons-navigator var="myNavigator" page="page1.html">
</ons-navigator>
</ons-template>
<ons-template id="page1.html">
<ons-toolbar>
<div class="center">Page1</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button
ng-click="push();">
Push New Page
</ons-button>
</div>
</ons-template>
<ons-template id="new_page.html">
<ons-toolbar>
<div class="center">New Page</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button ng-click="pop();">
Pop Page
</ons-button>
</div>
</ons-template>
ご回答をありがとうございました。
お陰様で上手くできました。
トップページはリストで、タブのHOMEボタンでトップに戻りたかったので、下記のようにしました。
<script>
ons.bootstrap().controller('MainCtrl', function($scope) {
$scope.hide = true;
$scope.push = function(u) {
if(u == "1") myNavigator.pushPage('page1.html');
if(u == "2") myNavigator.pushPage('page2.html');
if(u == "3") myNavigator.pushPage('page3.html');
$scope.hide = false;
}
$scope.gohome = function() {
myNavigator.pushPage('list.html');
$scope.hide = true;
}
});
</script>
</head>
<body ng-controller="MainCtrl">
<ons-tabbar var="tabbar" hide-tabs="{{hide}}">
<ons-tabbar-item
icon="home"
label="Home"
page="navigator.html"
ng-click="gohome();"
active="true"></ons-tabbar-item>
<ons-tabbar-item
icon="comment"
label="Comments"
page="page2.html"></ons-tabbar-item>
<ons-tabbar-item
icon="gear"
label="Settings"
page="page3.html"></ons-tabbar-item>
</ons-tabbar>
</body>
<ons-template id="navigator.html">
<ons-navigator var="myNavigator" page="list.html">
</ons-navigator>
</ons-template>
<ons-template id="list.html">
<ons-list>
<ons-list-item modifier="chevron" ng-click="push(1);">page1</ons-list-item>
<ons-list-item modifier="chevron" ng-click="push(2);">page2</ons-list-item>
<ons-list-item modifier="chevron" ng-click="push(3);">page3</ons-list-item>
</ons-list>
</ons-template>
<ons-template id="page1.html">
<ons-toolbar>
<div class="center">page1</div>
</ons-toolbar>
<div style="text-align: center">
<br />
TEST1
</div>
</ons-template>
<ons-template id="page2.html">
<ons-toolbar>
<div class="center">page2</div>
</ons-toolbar>
<div style="text-align: center">
<br />
TEST2
</div>
</ons-template>
<ons-template id="page3.html">
<ons-toolbar>
<div class="center">page3</div>
</ons-toolbar>
<div style="text-align: center">
<br />
TEST3
</div>
</ons-template>