1

ons-tabbarをアプリケーション下部もしくは最上部へ配置する場合は、ons-tabbarタグは一つ書けばアプリケーション全体で表示されるかと思います。

このons-tabbarを上段ツールーバー下へ配置する場合はons-page内に書く必要があるため、非常に冗長的なコードになってしまいますし、タブ状態の集中管理が出来ません。

Ionicでのタブバー上段配置のような形にしたいのですが、OnsenUIではons-page毎にons-tabbarを書く以外ツールバー下へ表示する方法はないのでしょうか?

現状のHTML構造はTab barテンプレートベースになっており、body > ons-tabbar > ons-tab > ons-navigator > ons-page > ons-toolbarといった構造です。

2 件の回答 2

3

ons-pageの配下にons-tabbarを書いてしまっていますが、こんな感じにすればons-tabbarの記述は1カ所でいけるかなと思います。

  • あるタブの中で画面遷移が頻繁に発生する
  • 選択したタブによってツールバーの内容が大きく異なる

といった場合にはこれだと難しいかもしれません。

ons.bootstrap()
.controller('MainCtrl', ["$scope", function($scope) {
  $scope.show = false;
  $scope.title = "Home";
  $scope.test = function() {
    $scope.title = "Tab " + tab.getActiveTabIndex();
  };
  $scope.pushFeed = function() {
    $scope.show = true;
    $scope.title = "Feed";
  }
  $scope.popFeed = function() {
    $scope.show = false;
    $scope.title = "Home";
  }
}]);
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>

<ons-page ng-controller="MainCtrl">
  <ons-toolbar>
    <div class="left">
      <ons-toolbar-button ng-click="navi.popPage()"  ng-if="show">Back</ons-toolbar-button>
    </div>
    <div class="center">{{title}}</div>
  </ons-toolbar>
  <ons-tabbar position="top" ons-postchange="test()" var="tab">
    <ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
    <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
    <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
    <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
  </ons-tabbar>
</ons-page>

<ons-template id="home.html">
  <ons-navigator var="navi" ons-prepush="pushFeed()"  ons-prepop="popFeed()">
    <p style="padding-top: 20px; color: #999; text-align: center">
      Home Page Contents<br />
    </p>
    <div style="padding-top: 10px; text-align: center">
      <ons-button ng-click="navi.pushPage('feed.html')">Push</ons-button>
    </div>
  </ons-navigator>
</ons-template>

<ons-template id="comments.html">
  <p style="padding-top: 20px; color: #999; text-align: center">
    Comments Page Contents
  </p>
</ons-template>

<ons-template id="tags.html">
  <p style="padding-top: 20px; color: #999; text-align: center">
    Tags Page Contents
  </p>
</ons-template>

<ons-template id="settings.html">
  <p style="padding-top: 20px; color: #999; text-align: center">
    Settings Page Contents
  </p>
</ons-template>

<ons-template id="feed.html">
  <p style="padding-top: 20px; color: #999; text-align: center">
    Feed Page Contents
  </p>
  <div style="padding-top: 10px; text-align: center">
    <ons-button ng-click="navi.popPage()">Pop</ons-button>
  </div>
</ons-template>

<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>

1
  • 回答有難うございます。 ons-navigatorの直下にons-pageを書かなくても動くのですね。 ドキュメントには「<ons-navigator>コンポーネントの直下には<ons-page>コンポーネントのみ配置できます。」と書いてあったので、想定外の回答でした。 あるタブの中で画面遷移が頻繁に発生するパターンなのと、現状作ってある範囲を考えると、この方法は厳しそうです。
    – gsjp21
    Commented 2015年9月8日 23:31
2

OnsenUIにそのようなオプションは用意されていませんが、CSSを適当に指定すれば可能です。
以下はons-toolbarをons-tabbarの外に置くパターンです。

ons.bootstrap();
.tab-bar {
  top: 44px;
  border-top: none;
  border-bottom: 1px solid rgba(0,0,0,0);
}

.tab-bar__content {
  top: 93px !important;
  bottom: 0 !important;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/onsenui.min.js"></script>

<ons-toolbar>
  <div class="center">My App</div>
</ons-toolbar>

<ons-tabbar>
  <ons-tab page="nav.html" icon="home" label="Home" active="true"></ons-tab>
  <ons-tab page="page2.html" icon="camera" label="Camera"></ons-tab>
  <ons-tab page="page3.html" icon="gear" label="Settings"></ons-tab>
</ons-tabbar>

<ons-template id="nav.html">
  <ons-navigator page="page1.html" var="nav"></ons-navigator>
</ons-template>

<ons-template id="page1.html">
  <h1>Page1</h1>
  <ons-button ng-click="nav.pushPage('page1-2.html')">Push</ons-button>
</ons-template>

<ons-template id="page1-2.html">
  <h1>Page1-2</h1>
  <ons-button ng-click="nav.popPage()">Pop</ons-button>
</ons-template>

<ons-template id="page2.html">
  <h1>Page2</h1>
</ons-template>

<ons-template id="page3.html">
  <h1>Page3</h1>
</ons-template>

2
  • 質問に現状のHTML構造について明記してなくて申し訳ないです。 テンプレートの構造をベースに書いてますので、ons-toolbarがons-navigator > ons-page の下にあります。ですので回答頂いたcssでは対応できませんでした。
    – gsjp21
    Commented 2015年9月9日 0:22
  • 頂いた回答を元に色々やってみました。「.tab-bar__content」への「top: 93px !important;」を指定すると、ons-tabbarへhide-tabs属性を当てた時に「.tab-bar__content」のtopが0にならなくなりズレたままになってしまいました。cssだけでの対応は厳しい感じもします。
    – gsjp21
    Commented 2015年9月9日 2:10

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。