Navigation links in ion-nav-bar

1

Hey guys,

I’m trying to reproduce this effect in ionic :

For that, I’m injecting a $scope.title in my view. this title contains a list with both my links that will make the slidebox in my content, well… slide.

A codepen is worth a thousand words :

As you can see, the title is injected and my list is styled, but clicking on them (which is bind with the slideTo() function on ng-click) doesn’t work. What am I doing wrong? How would you do it?

Thanks a lot!

2

With the new nightly builds you can use ion-nav-title to place html in the title. I messed around with your codepen and got it to work using ion-nav-title.

3

That’s awesome news! Thanks a lot @brandyshea

1 Like
4

I don’t see any content inside when I click timeline or explore, is this not working anymore?

Also +1 to trying to figure out how to do this. Has anyone else gotten this working in a non-hacky way?

5

Hi @hay, If you’re working with nightly, you can now pass anything you want as a title this way:

<ion-nav-title>
  <ul class="clearfix list-two">
    <li>
      <a ng-click="setInbox(0)" ng-class="{active: activeInbox == 0}">Received</a>
    </li>
    <li>
      <a ng-click="setInbox(1)" ng-class="{active: activeInbox == 1}">Sent</a>
    </li>
  </ul>
</ion-nav-title>

It works like a charm!

6

Here’s the solution I came up with, please tell me if this is completely wrong/bad:

app.js

.state('tab.nav.one', {
  url: '/one',
  templateUrl: 'templates/tab-nav-one.html',
  controller: 'NavCtrl'
})

.state('tab.nav.two', {
  url: '/two',
  templateUrl: 'templates/tab-nav-two.html',
  controller: 'NavCtrl'
})
    
.state('tab.nav.three', {
  url: '/three',
  templateUrl: 'templates/tab-nav-three.html',
  controller: 'NavCtrl'
})

tab-nav.html

<ion-view>
    <div class="bar bar-header">
        <button class="button button-clear button-positive">button</button>
        <div class="button-bar">
            <a class="button" href="#/tab/nav/one">One</a>
            <a class="button" href="#/tab/nav/two">Two</a>
            <a class="button" href="#/tab/nav/three">Three</a>
        </div>
        <button class="button button-clear button-positive">button</button>
    </div>
    
    
    <ion-nav-view></ion-nav-view>
    
</ion-view>
7

Also, do you know where to disable the animation or change it?

8

I believe the Ionic team removed the new slidebox from beta 14, which is most likely what broke the codepen. The links in the navbar should still work but the calls to the ionSlideBox are different. If you need the slidebox working I can take a look at it later on.

To disable the animation or change it you can do a few different things:

If you want to disable it on a link or change the platform use the nav-transition

<a nav-transition="none" href="#/home">Home</a>

If you want to change the direction you can use nav-direction

<a nav-direction="forward" href="#/home">Home</a>

You can also disable the animation before transitioning to the view

$ionicHistory.nextViewOptions({
  disableAnimate: true
});