What I try to do is have two different set of ion-side-menu, but it seems the first one always got overwritten by the second declared ion-side-menu directive.
you can have have one side menu per side. for exemple, one <ion-side-menu side="left"> and one <ion-side-menu side="right">
if you need your sidemenu to be changed depending on a context value, then use the power of angularJS to declare some ng-if="context1" or ng-if="!context1" to present different sidemenu templates
Related
The ion-back-button does NOT show up to the right of the ion-menu-button. Why is that?
the ion-menu-button and the ion-title show properly and aligned on the same horizantal position.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<!-- navigation button-->
<ion-menu-button></ion-menu-button>
<!-- optional back button-->
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
{{ pageTitle | translate}}
</ion-title>
</ion-toolbar>
</ion-header>
In the DOM inspector the CSS display attribute of the ion-back-button is set to none. Why would it set itself to none?
I used
this.navCtrl.navigateForward('/term/' + term);
to navigate to this page, thus I expect the back button to pick this up. Why is navigateForward not adding to the stack, which would make the ion-back-button show?
If there is no page in Stack then
<ion-back-button></ion-back-button>
will not show. If you want to show then You need to be added a specific page in "defaultHref" Attribute.
<ion-back-button defaultHref="logout"></ion-back-button>
you need to be learned from here
https://ionicframework.com/docs/api/back-button
It will not visible if there will be no previous overlay/page to show
So you can set css
ion-back-button {
display: block;
}
Then add click event on element
<ion-back-button (click)="close()">
<ion-icon name="close"></ion-icon>
</ion-back-button>
Add on .ts file
click() {
this.modalCtrl.dismiss();
}
For anyone who has this trouble, and the ion-back-button is still not appearing, check that you have the IonicModule imported in your page's module. It happened to me that I created a component for the ion-header and the ion-back-button was not appearing. It was because my ComponentsModule (the one that declares and exports all my components) had only the CommonsModule imported and not the IonicModule. So always check for the IonicModule in your imports. Otherwise the back button will not appear
Is it root page? if so ion-back-button will not show up.
Try adding the attribute defaultHref. For example: <ion-back-button defaultHref="home"></ion-back-button>. it should show up regardless of having no navigation stack.
So Ionic developers make life complicated, now (Ionic5) the attribute is called default-href and not defaultHref.
But still when clicking not loading to the href.
Workaround. I programmatically decide with the URI path. Drawback, if more detail pages are added to the app, they need to be added (e.g. in an array of back-button-qualifying paths).
<ion-button *ngIf="router.url.includes('/term/')"><ion-icon name="arrow-back"></ion-icon></ion-button>
Added the Router Object to the constructor of this component
constructor(public router: Router) { }
If someone still comes up with why the programmatic navigation does NOT add to the navigation stack - so that the back button would appear on the detail page - I gladly listen.
Just need to add the color in scss file to show up.
ion-back-button{
--color: black;
}
And also don't forget to indicate the href, adding it html file
<ion-buttons slot="start">
<ion-back-button defaultHref="YourRouteHere"></ion-back-button>
</ion-buttons>
Make sure you arrived to that page via a router link that modifies the route history. Otherwise the backbutton wont show because there is no recorded history of a previous route.
My issue was, the link i clicked which takes me to a page forward, had routerDirection="none". So there was no previous route so my back button didn't show.
Changing
<IonRouterLink routerDirection="none" routerLink={`/item/${item.id}`}>...</IonRouterLink>
To
<IonRouterLink routerDirection="forward" routerLink={`/item/${item.id}`}>...
fixed my issue.
I'm using the Ionic framework and I just got the template project side-menu from them. I was wondering if it's possible to put the ion-header-bar appear above the ion-side-menu.
This is how it is right now:
This is how I want it to be:
Any ideas?
You could use an alternative drawer component for your side menu, for example:
https://github.com/beaver71/ionic-ion-drawer
Basic usage is:
<drawer side="left">
<ion-content>
....
</ion-content>
</drawer>
Here is a working example: http://codepen.io/beaver71/pen/BKpRjM/
When using ionic framework for building apps, there are two ways how UI elements can be defined:
using div tags:
<div class="bar bar-header bar-positive">
...
</div>
using directives:
<ion-header-bar class="bar-positive">
...
</ion-header-bar>
In the documentation, the first variant (using div) is used. But in a course I was watching, the second one was used (and it seemed cleaner to me).
What are the differences between the two ways shown above? Is there a preferred or recommended way of defining UI elements?
I recommend you to use Directives instead of Div if you need to access to corresponding APIs. For example for a list : http://ionicframework.com/docs/api/directive/ionList/
Using the directive will allow you to use APIs options.
BUT, if you just want a beautiful UI, and you don't need APIs, you can use div which will render templates fastly.
ion-header-bar tag is just Directive written by ionic with some fantastic attribute which you will not get in div tag
attribute like :
align-title
no-tap-scroll
this both comes with ion-header-bar tag so if you want to perform any action on the view so u can use ion tag or only for view purpose you can use div tag.
Im having a hard time understanding how Ionic handles ion-nav-view vs. ion-view. I'm trying to build an app where the views are not nested (as example apps). This is what I've done
In index.html I have an ion-nav-view
I have 3 pages. 1 login, 1 list, and 1 item (item is a list item beeing clicked)
My list page is an ion-side-menus while the other 2 are ion-view's
Now to my question
When I click an item in my list I get a transition to my item page but when I go back to my list there is no page transition. This is the HTML
<ion-header-bar class="bar-dark">
<div class="buttons">
<button nav-transition="slide-left-right" class="button button-icon button-clear ion-android-arrow-back" ui-sref="list">
</div>
<h1 class="title">Item</h1>
</ion-header-bar>
How can I get transitions to work even though each page is its own ion-view?
EDIT
I solved the "transition back" using nav-direction="back"
Next problem is that transition only works ones from the list?
If i click the above the slide left transition occurs, but if I go back and press it again I don't get a transition? Is it some sort of cache?
The way I do is to have ion-side-menus inside index.html as the only directive, and inside it and with an ion-nav-view inside.
Then define an ion-side-menu with side="left" and include the list you want to show.
That way you can define a side-menu that will show throughout the whole app and be available with all the content you need.
Now to answer your question, I think the list page (in your case the one with ion-side-menus) does not have transition when going back because it is now an ion-view. The page transitions occur on ion-views when they are swapped in-out inside the . But the ion-side-menus page is not swapped in-out it's just there.
Regarding this:
EDIT I solved the "transition back" using nav-direction="back"
It worked because you explicitly told ionic that you want a nav-transition when going back.
Hope this helps a bit
After updating an existing Ionic project from 1.13-beta to 1.14-beta I've experienced some behaviour I can't explain. When changing from one viewstate to another, the old view doesn't leave the page. Upon logging both angular ui router events and Ionic navigation events I've noticed Ionic's Exit Events aren't fired:
$ionicView.leave
$ionicView.beforeLeave
$ionicView.afterLeave
Documentation: (http://ionicframework.com/blog/navigating-the-changes/)
Has anyone else experienced similar behaviour? If so, have you found any way to resolve this?
Events Fired:
$stateChangeStart: App.LoadApp.Input -> App.Main.QrToken
$viewContentLoading: Main
$viewContentLoading: QrToken
$stateChangeSuccess: App.LoadApp.Input -> App.Main.QrToken
$ionicView.beforeEnter
$ionicView.afterEnter
$ionicView.enter
I can load in the QrToken view if I Don't nest it inside Main, so I believe the problem lie there. Can anyone take a look at my Main Template and help me find a solution.
<div ng-controller="fbMenuController">
<ion-side-menus>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content scroll="true">
<div ng-repeat="Group in fb.Model.MenuGroups">
<ion-item class="item-divider">{{Group.Name}}</ion-item>
<!-- href="#/Main/{{Page.Name}}" -->
<a ng-repeat="Page in Group.Items" nav-transition="android" nav-direction="swap" class="item" ng-click="fb.SelectPage(Page.State)">
{{ Page.Name }}
</a>
</div>
</ion-content>
</ion-side-menu>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark" ng-show="fb.Model.ShowHeader">
<div class="buttons">
<button class="button-icon icon ion-navicon" ng-click="fb.ToggleLeftMenu()"></button>
</div>
<h1 class="title">{{ fb.Model.ActivePage.Name }}</h1>
</ion-header-bar>
<ion-content scroll="true">
<ion-nav-view name="Main">
</ion-nav-view>
</ion-content>
</ion-side-menu-content>
</ion-side-menus>
</div>
If your view is wrapped in a tab using <ion-tab>, you need to register for $ionicNavView-Events:
$scope.$on("$ionicNavView.leave")
This is an open issue https://github.com/driftyco/ionic/issues/2869 and probably occurs when view-cache="false".
On my case $ionicView.leave worked in nested views but not when moving between tabs nor did $ionicParentView.leave so I came around it with another solution.
Solution:
On MAIN controller I added:
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (fromState.name === 'name-of-leaving-state') {
//your code here, similar behavior with .$on('$ionicView.leave')
}
});
Hope it helps
I had this problem the other day. I was listening for the event on my child controllers. When I moved the listener to the parent, it worked. I wasn't quite sure why, but now I think I know why. It's because of the way Ionic caches the views. Specifically this line from the docs:
If a view leaves but is cached, then this event will not fire again on
a subsequent viewing.
It's likely that your views were cached before you added the listener and the leave event never fired. But since your parent is... well... the parent, its leave event is triggered any time you leave any of its children. I haven't officially tested this, it's just a hunch. To test, try telling ionic to not cache the view by adding cache-view="false" to your ion-view declaration.
See docs here.
Found the problem. The 'Main' state was defined without the attribute
abstract: true
this worked in Ionic 1.13-beta but Aparently breaks in Ionic 1.14-beta. Didn't find this change in any of the migration posts on either Ionic, AngularJS or Angular-ui-router, so I don't know why this solved it. If anyone can elaborate more on the behavior in this situation, I'd be grateful but for now I have a solution.
I know this is quite old, however i wanted to add that on Ionic v1.3.4 (the last version) the $ionicView.beforeEnter && $ionicView.afterEnter all work. I mention this because others have commented that v1.3.x was having issues with controller views for .beforeEnter and .afterEnter. But I don’t ever recall having issues on any version of 1.3.x.
That being said, I came to this thread because I am updating an older ionic v1 app and ran into a problem where the $ionicView.beforeEnter was not firing and I could not figure out why. It turns out the template that goes with that controller was missing closing HTML tags on a few <i class="icon> elements…I didn’t add the closing </i>
Thus, apparently, certain elements missing a closing tag was preventing the controller $ionicView.beforeEnter/afterEnter functions from firing. Don't know if its all tags or specific tags but I can say I had NEVER seen that before so it took me a while to figure out the issue was in my template and not in my controller.
For what its worth, hope my discovery helps those in the future.