Hi *,
I would need some help.
I am trying to build an app where my main landing page (after the user navigates through signups/logins) is a side-menu enabled screen and a click on a button on this takes the user to a tabbed screen. Something like this:
Now the home and the tabbed screens can have other nav-header-right buttons moving to other views and back. I have something in place, but i see some problems during the navigation. e.g., if i go from home > next (lands on tab1) - all is fine. if i go to tab2 (which has a different right header icon) and i click back, the home screen nav-header has the same icon as in tab 2 - which is not correct.
Also, i have set my nav-title to be an centered image. but on navigating from home > next (lands on tab 1) > click on tab2 : the images gets left-aligned overlapping the “back-button”
What is the right way to configure the nav-bars to avoid these issues?
in my index.html:
<ion-nav-title>
<img class="s-nav-bar-logo" src="img/logo_green_black_BG.jpg">
</ion-nav-title>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
My Home screen:
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-ios-gear" ng-click="goToSettings()"
nav-direction="forward"></button>
</ion-nav-buttons>
</ion-nav-bar>
<!-- Content -->
<ion-content padding="false" class=" manual-remove-top-padding has-header" scroll="false">
<a ui-sref="sonect.nearest" class="button button-positive button-large button-full s-button"
nav-direction="forward">Next</a>
</ion-content>
</ion-side-menu-content>
<ion-side-menu id="side-menu" side="left">
<ion-content ng-controller="menuCtrl" padding="false" style="top:0px !important;"
class="side-menu-left s-side-menu">
<div data-componentid="user-image"
style="margin: 0px; line-height: 250px; background-color: rgb(232, 235, 239); text-align: center;">
<i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i>
</div>
<ion-list id="menu-items" data-componentid="list3">
<ion-item class="item-icon-left s-side-menu-item" id="menu-list-item13" data-componentid="list-item13">
<i class="icon ion-ionic"></i>Item
</ion-item>
<ion-item class="item-icon-left s-side-menu-item" id="menu-list-item14" data-componentid="list-item14">
<i class="icon ion-ionic"></i>Item
</ion-item>
<ion-item class="item-icon-left s-side-menu-item" id="menu-list-item15" data-componentid="list-item15">
<i class="icon ion-ionic"></i>Item
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
tab 1 (tab 2, 3 have different layouts with different nav-header-right buttons)
<!-- Content -->
<ion-content padding="false" class=" manual-remove-top-padding has-header">
<div style="margin: 0px; line-height: 250px; background-color: rgb(232, 235, 239); text-align: center;">
<i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i>
</div>
<button id="nearest-button6" class="button button-positive button-large button-full s-button">Click Me!</button>
</ion-content>
Any help is much appreciated. I am new to ionic, but have enough AngularJS experience.
Thanks in advance!
Ari.