Tag: angular js

There’s a couple of issues I have hit on today as I was working through an Ionic nav menu that I wish I knew about earlier.

The good news is, both can be demonstrated in the same code sample.

Let’s see the code first, then go through what it’s doing:

<ion-side-menu side="left" expose-aside-when="large">
    <header class="bar bar-header bar-calm">
        <h1 class="title">Menu</h1>
    </header>

    <ion-content class="has-header">
        <ion-list>
            <ion-item ng-repeat="dayName in days"
                      menu-close
                      ui-sref="app.day-view({day:'{{ dayName }}'})"
                      nav-clear
                      ng-class="isToday(dayName) ? 'item-stable' : ''">
                {{ dayName }}
            </ion-item>
        </ion-list>
    </ion-content>
</ion-side-menu>

Upper Class

The first is that when using the ion-item it’s possible to use the Ionic predefined CSS styles to give your navigation / list items a bit of colour.

The available options are the same that are available for everything else, just prefixed with item:

• item-light
• item-stable
• item-positive
• item-assertive
• item-balanced
• item-energized
• item-royal
• item-dark

If you’re unsure about what any of them look like, this is a good example.

Notice, this goes on the ion-item definition, and although I have used ng-class in the example, this can be swapped out for the standard css style class.

Standard CSS example:

<ion-item class="item-stable">list item text here</ion-item>

More dynamic method using ng-class and the ternary operator to do an inline or shorthand if / else.

<ion-item ng-class="yourFunction(yourProperty) ? 'item-stable' : 'item-light'">
  {{ yourProperty }}
</ion-item>

Ionic Losing My History

I’m going to cut right to the chase on this one – if you are finding your ‘back’ operations get all screwed up when using a side menu, then search your project for instances of nav-clear and remove with extreme prejudice.

No doubt this is wanted in some circumstances, but it cost me at least an hour of head scratching today – not helped by the Ionic forums being offline for some reason.

It turns out this nav-clear attribute deletes history, in my case, whenever a user clicks on a different menu option. Not at all what I wanted.

The documentation for this is good, but it’s seemingly hidden. I could only find it with a well thought out (read: after a million attempts) Google, but frustratingly it is all there if you know what to search for.

It just doesn’t show up on the menu anywhere as far as I can see.

Always Open Sidebar (On iPad or Similar)

Even though I said I would do two tips, this third one is worth mentioning. This one didn’t actually cost me any time – it was found whilst Googling for the other problems above.

Anyway, it’s too good not to share.

If you have a side menu and you think it would be a good thing if it was always open, should the device have enough screen space (e.g. on an iPad or similar), then stick in the following:

expose-aside-when="large"

And so long as your device width is >768px it will always show the sidebar.

This one is right there in the documentation, but I thought it was awesome and worth sharing.