I want to place the ons-tabbar under the upper toolbar without writing redundant code.

If you want to place the ons-tabbar at the bottom or top of the application, you should write one ons-tabbar tag and it will appear throughout the application.

If this ons-tabbar is placed under the top-to-louver, it must be written within ons-page, so it is very redundant and cannot be centrally managed.

I would like to make it look like the top of the tab bar on Ionic, but is there any other way to display it under the toolbar except to write ons-page ons-tabbar?

The current HTML structure is based on the Tabbar template, such as body>ons-tabbar>ons-navigator>ons-page>ons-toolbar.

onsen-ui

2022-09-30 19:41

2 Answers

ons-tabbar is written under ons-page, but if you do this, you can write ons-tabbar in one place.

The screen transitions occur frequently in a certain tab
The contents of the toolbar vary greatly depending on the tab you select

If so, this might be difficult.

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-pageing-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-buttoning-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-buttoning-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>

2022-09-30 19:41

The OnsenUI does not provide such an option, but it is possible if you specify the CSS appropriately.
Below is a pattern where the ons-toolbar is placed outside the 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-buttoning-click="nav.pushPage('page1-2.html')">Push</ons-button>
</ons-template>

<ons-template id="page1-2.html">
  <h1>Page 1-2</h1>
  <ons-buttoning-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>

2022-09-30 19:41

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656