Ionic Tabs For Part of Screen


#1

I’d like to use Ionic tabs for the bottom half of the screen so that clicking a tab will just change the lower half of the screen. None of the the configs I tired seem to work - are there any demos showing this type of setup?

Thanks


#2

You can use the ionic css classes and do normal ng.
See example below.

<div class="tabs">
      <a class="tab-item" ng-click="hometab = !hometab">
        Home
      </a>
      <a class="tab-item" ng-click="favtab = !favtab">
        Favorites
      </a>
      <a class="tab-item" ng-click="settingstab = !settingstab">
        Settings
      </a>
    </div>

<div ng-show="hometab ">
home
</div>
<div ng-show="favtab ">
Favourites
</div>
<div ng-show="settingstab ">
Settings
</div>

#3

You can add a tag to ion-content like the example below:

<ion-view view-title="Friends">
<ion-content class="margin">
<p>This is the Friends page</p>
</ion-content>

Then in your style.css you can add a rule as follows:

.margin{
    margin-top: 30%;
    border-top: dotted;
}