CODEWITHSUNDEEP
angularjsionic-framework
Brieuc
Brieuc

Reputation: 4114

Ionic, striped tabs header, should not slide to content on click

I'm kinda new to angularJs and Ionic. I have implemented striped tabs following the css documentation of ionic's website.

Striped tabs

I would like when i click on a tab that the header doesn't slide (reload) with its content.

Basicaly i need to do something similar than the javascript documentation of ionic, here.

This is my search page :

<ion-view title="Friendlist">
<div class="tabs-striped tabs-top tabs-background-stable tabs-color-calm">
    <div class="tabs tabs-icon-left">
        <a class="tab-item" href="#">
            <i class="icon ion-person"></i>
            Followers
        </a>
        <a class="tab-item" href="#">
            <i class="icon ion-star"></i>
            Following
        </a>
        <a class="tab-item active" ui-sref="search">
            <i class="icon ion-search"></i>
            Search
        </a>
    </div>
</div>
<ion-content class="has-tabs-top" ng-controller="UserController">

    <div class="list list-inset">
        <label class="item item-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="text" placeholder="Search">
        </label>
    </div>

    <div class="list">
        <div ng-repeat="user in users.user">
            <a class="item item-avatar" ui-sref="user({id:user.id})">
                <!-- <img ng-src=""> -->
                <h2>{{ user.firstname }} {{ user.lastname }}</h2>
            </a>
        </div>
    </div>

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

I'm using 3 different routes that link to 3 different template and probably 3 different controllers.

.state('followers', {
    url: '/followers',
    templateUrl: 'templates/followers.html'
 }) 
 .state('following', {
    url: '/following',
    templateUrl: 'templates/following.html'
 }) 
 .state('search', {
    url: '/search',
    templateUrl: 'templates/search.html'
 })

I'm not sure to do it the right way. I don't mind if the loading of the tab's section is not instant but at least i'd like to keep my striped tabs header static as if the page was not reloading or accessing a new page.

Upvotes: 1

Views: 3552

Answers (2)

sameera207
sameera207

Reputation: 16629

If you want to do this, you will have to use <ion-tabs> directive

ionic team has build a nice template if you are getting started . you can use it by running ionic start <Your app name> tabs

But if you are integrating it an existing app, have a look at their template here

and the demo

HTH

Upvotes: 1

Anshul Kalra
Anshul Kalra

Reputation: 198

you have to change the routes, so that the parent is accessed by the child. Here the tabs are child of the Parent (friendlist). Friendlist should be present before the other routes. change your route to :

.state('friendlist', {
    url: '/friendlist',
    templateUrl: 'templates/friendlist.html',
    controller:'FriendlistCtrl'
 }) 
.state('friendlist.followers', {
    url: '/followers',
    templateUrl: 'templates/followers.html'
 }) 
 .state('friendlist.following', {
    url: '/following',
    templateUrl: 'templates/following.html'
 }) 
 .state('friendlist.search', {
    url: '/search',
    templateUrl: 'templates/search.html'
 })

now try using FriendlistCtrl for the tab rather than using different different controller for every tab.

Upvotes: 1

Related Questions