

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といった構造です。


CC BY-SA 3.0
2015-09-08T07:50:21.307
16375
2015-09-09T02:50:00.630
2015-09-09T00:15:00.613
10563
10563
question
onsen-ui
ons-tabbarを冗長なコードを書かず上部ツールバー下へ配置したい


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

[code]

    ons.bootstrap();
[/code]

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-09-08T11:53:36.820
16384
2015-09-08T11:53:36.820
8532
16375
answer


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

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

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

[code]

    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";
      }
    }]);
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-09-08T14:48:06.810
16391
2015-09-09T02:50:00.630
2015-09-09T02:50:00.630
3516
3516
16375
answer