Can I use ion-tabs without routing/states on a fixed page?

I basically want to create some tabs that will be used on the same view/page.

I only want to switch/toggle between the tabs, hiding and showing the tab content, not routing to a new state and not changing the history either.

Is this possible?

put the content in the ion-tab-tag and go^^ (wrapped in ion-content i think)

This is what I have :

<ion-pane title="Pdf">
        <ion-tabs>
            <ion-tab ng-repeat="(key, tab) in vm.files" title="{{tab.title}}">
                <ion-content>
                    <ion-list>
                        <ion-item ng-repeat="file in tab.group | searchPdf:search">
                            <div class="center" ng-click="vm.load('{{vm.pdf}}' + file.link, '{{file.title}}')">
                                <img ng-src="{{vm.thumb}}{{file.image}}" class="center pdf-image">

                                <h2 style="padding-top: 1em;">{{file.title}}</h2>
                            </div>
                        </ion-item>
                    </ion-list>
                </ion-content>
            </ion-tab>
        </ion-tabs>
    </ion-pane>

But I just get empty <ion-tab>'s

and if you wrap an ion-view around the ion-content ?
http://play.ionic.io/app/1e1760830d5d

Well full pdf.html template is :

<ion-view view-title="Pdf {{vm.type.name}}" ng-controller="pdfController as vm">
    <ion-nav-title>
        <div class="row">
            <div class="col center {{vm.type.class}}">
                <img class="nav-title-image" ng-src="img/{{vm.type.image}}">
            </div>
        </div>
    </ion-nav-title>

    <div class="bar bar-subheader">
        <div class="col-10"></div>
        <div class="col">
            <div class="row">
                <div class="col-25">
                    <input type="number" min="1815" max="2015" placeholder="{{vm.search}}" ng-model="vm.searchModel" class="col">
                </div>
                <div class="col">
                    <button ng-if="vm.searchModel" class="button-icon ion-android-close" ng-click="vm.clearSearch()">
                    </button>
                </div>
            </div>
        </div>
    </div>

    <ion-pane title="Pdf">
        <ion-tabs>
            <ion-tab ng-repeat="(key, tab) in vm.files" title="{{tab.title}}" ng-click="vm.tab('{{key}}')">
                <ion-view>
                    <ion-content>
                        <ion-list>
                            <ion-item ng-repeat="file in tab.group | searchPdf:search">
                                <div class="center" ng-click="vm.load('{{vm.pdf}}' + file.link, '{{file.title}}')">
                                    <img ng-src="{{vm.thumb}}{{file.image}}" class="center pdf-image">

                                    <h2 style="padding-top: 1em;">{{file.title}}</h2>
                                </div>
                            </ion-item>
                        </ion-list>
                    </ion-content>
                </ion-view>
            </ion-tab>
        </ion-tabs>
    </ion-pane>
</ion-view>

for your subheader use the directive ion-header-bar instead

i look into the other problem^^

Well I use already a header for the nav-bar :

<body ng-app="myApp">
    <ion-nav-bar class="bar-stable">
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

    <ion-footer-bar align-title="right" class="bar footer" ng-controller="footerController as vm">
        <h3>footer</h3>
    </ion-footer-bar>
</body>
</html>

Which seems to work, ion-header-bar would just override the header that I already have :stuck_out_tongue:

even if you add class=ā€œbar-subheaderā€ ?

<ion-header-bar class="bar-subheader"></ion-header-bar>
1 Like

ah didnā€™t test with classes, works :slight_smile: thanksā€¦

Still unsure about the tabs though

strange if i put and ion-nav-view around the ion-view in the ion-tab it shows the content correctly if i change the tabs but on the intial view the ion-tab goes not as it should^^

but as fallback use states for the tabs

Hmm well what if I use jQuery Tabs or something else instead? A custom angular tabs ? with just show/hide ?

you could build it on your own:

  1. set the ion-content to scroll=ā€œfalseā€
  2. add your tab-bar with divs or something like this
  3. add ion-scroll to scroll your ā€œtabā€-content
  4. add the content you want to show to the ion-scroll and show/hide it with ng-show

I had the same request as you to show tabs in a view without further routing. After searching for serveral hours I found this solution which in my case works great:

in my view where i want to use the tabs i have the following markup:

<ion-view>
  <ion-nav-title>{{location.label}}</ion-nav-title>
  <ion-content class="bg-2">

<div class="main-nav">
    <ul >
        <li ng-repeat="tab in locationTabs"
            ng-class="{active:isActiveTab(tab.url)}"
            ng-click="onClickTab(tab)"><a>{{tab.title}}</a></li>
    </ul>
</div>
<div ng-include="currentTab"></div>

</ion-content>
</ion-view>

Then in my controller:

$scope.locationTabs = [{
    title: 'Info',
    url: 'templates/locations/sub-locations-info.html'
}, {
    title: 'Map',
    url: 'templates/locations/sub-locations-map.html'
}, {
    title: 'Events',
    url: 'templates/locations/sub-locations-events.html'
}, {
    title: 'Albums',
    url: 'templates/locations/sub-locations-albums.html'
}, {
    title: 'Videos',
    url: 'templates/locations/sub-locations-videos.html'
}];

$scope.currentTab = 'templates/locations/sub-locations-info.html';

$scope.onClickTab = function(tab) {
    $scope.currentTab = tab.url;
}

$scope.isActiveTab = function(tabUrl) {
    return tabUrl == $scope.currentTab;
}

and here is the css for my tabs:

/* Navigation Tabs */


.main-nav ul {

display         : -webkit-flex;
  display         : -ms-flexbox;
  display         : flex;
  width           : 100%;
  height          : 43px;
  background-color: #fff;
  margin          : 0 auto;
  width           : 100%;
  white-space     : nowrap;
  margin-bottom: 20px;
}

.main-nav ul li {
  -webkit-flex-grow      : 1;
  -ms-flex-positive      : 1;
  flex-grow              : 1;
  -webkit-flex-shrink    : 1;
  -ms-flex-negative      : 1;
  flex-shrink            : 1;
  -webkit-flex-basis     : 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis             : 100%;
  text-align             : center;
  line-height            : 43px;
  height                 : 43px;
  margin                 : 0;
  text-transform         : uppercase;
  letter-spacing         : .8px;
  border-bottom          : 1px solid #ddd;

}

.main-nav ul li a, .main-nav ul li div {
  color  : #444;
  font-size: 10px;
  display: block;
  width  : 100%;
  height : 100%;
  font-family: latobold;
}


.main-nav ul li.active {
  border-bottom: 1px solid #3DD4CD;
}

here is an example content of the following file url: ā€˜templates/locations/sub-locations-info.htmlā€™

 <div class="padding-16 bg-2 ">
        <h4 class="contentTitle">{{location.label}}</h4>
        <p class="contentDescription">{{location.description}}</p>
      </div>
 <div class="height-4"></div>

here are the tabs in action:

image

Please bear in mind i am an absolute beginner with ionic and javascript so there are probably better solutions for tabs but this works for me so far. there are no state transitions with this approach.

Hope it helps :wink:

1 Like

I ended up doing:

<ion-content title="Pdf" scroll="false">
        <div id="tabs-wrapper" class="row">
            <div class="col-10"></div>
            <div class="tab-header col" ng-repeat="(key, tab) in vm.files" title="{{tab.title}}" ng-click="vm.tab('{{key}}')">
                {{tab.title}}
            </div>
            <div class="col-10"></div>
        </div>

        <div ng-repeat="(key, tab) in vm.files" id="tab{{key}}" class="tab-content">
            <ion-list id="list-{{key}}">
                <ion-item ng-repeat="file in tab.group">
                    <div class="center" ng-click="vm.load('{{vm.pdf}}' + file.link, '{{file.title}}')">
                        <img ng-src="{{vm.thumb}}{{file.image}}" class="center pdf-image">

                        <h2 style="padding-top: 1em;">{{file.title}}</h2>
                    </div>
                </ion-item>
            </ion-list>
        </div>
    </ion-content>

And with the tab function as :

        vm.tab = function(tabId) {
            $('.tab-content').hide();

            var container = $('#list-' + tabId + ' .list');
            var selector = $('#list-' + tabId + ' ion-item');
            
            $('#list-' + tabId).flipster({
                itemContainer: container,
                itemSelector: selector,
                style: 'carousel',
                start: 0
            });

            $('#tab' + tabId).show();
        };

Not the best solution, but simple and works