I try to make a little app in ionic2 to learn about it but I have a problem with navigation.
In fact I have well understand the difference between a rootpage (change whit nav.setRoot) and a "normal" page (add with nav.push). The thing is for my app I'll need to be able to open a side menu (this is ok if I'm on a rootpage but not it's not ok with the second type of page) and to be able to go back (this is ok with a push page but not with a rootpage).
So for me this type of page should be push and not a root page but how repear side menu on this type of page?
Thank you.
EDIT:
What about using persistent="true" in your ion-menu item? Like you can see in Ionic2 docs:
Persistent Menus Persistent menus display the MenuToggle button in the
NavBar on all pages in the navigation stack. To make a menu persistent
set persistent to true on the element. Note that this will
only affect the MenuToggle button in the NavBar attached to the Menu
with persistent set to true, any other MenuToggle buttons will not be
affected.
So your app.html woul be:
<ion-menu [content]="content" persistent="true">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button menuClose ion-item (click)="logout()">Logout</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Related
I have a mobile app/website (in Ionic 3.25) under construction and wanted to support the desktop web browser experience without wasting all that screen space. I stumbled across Ion-Split-Pane. It seemed perfect from the documentation, allowing me to pop open the sidemenu as a full menu when a large screen was used. I set the code as recommended in the app.html file:
<ion-split-pane when="md">
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>
The behavior I'm getting when using Ionic Serve is baffling. When I use a large screen (above somewhere around 922 pixels wide), I get a three pane experience, with a bunch of whitespace containing nothing in the far right. This was surprising, since I thought the app would use the available space:
When I then shrink below that size, the entire website/app disappears. The elements are still in the html, but nothing is drawn to the screen.
This behavior is so far from the documentation that I must have something wrong, but I'm not certain what. Anyone know how I could get this panel working?
After working on this for a while, I discovered my problem. It isn't mentioned explicitly in the documentation, so I'll post the answer here in case anyone else runs into it.
When converting a side-menu project to use Ion-Split-Pane, the content section needs to have the main keyword added to the <ion-nav> object. #content and [root] are not enough.
The amended code:
<ion-split-pane when="md">
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>
Without that line, the entire application is thrown into the 'menu' pane and simply disappears when going to the mobile view.
I am developing an ionic app with a side menu, I want to animate the list items on the side menu when it is toggled open using animate.css. To do this when the menu is opened I add a css class to the menu items. When the menu is closed I remove the class.
I did some research and found some event listeners that were added to ionic which I tried:
<ion-menu [content]="content" class="sidemenu-header" (ionOpen)="toggleMenuState()" (ionClose)="toggleMenuState()">
<ion-header>
<ion-toolbar>
<img src="./assets/imgs/sidebar-header-icon.png" class="icon"/>
<ion-title>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="sidemenu-content" (click)="toggleMenuState()">
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"
[ngClass]="{'test-class': isMenuOpen === true}">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Now when the menu is opened the class get's added however when I click outside the menu to close the it the classes do not get removed.
How do I do this?
I try to make a little app in ionic2 to learn about it but I have a problem with navigation.
In fact I have well understand the difference between a rootpage (change whit nav.setRoot) and a "normal" page (add with nav.push). The thing is for my app I'll need to be able to open a side menu (this is ok if I'm on a rootpage but not it's not ok with the second type of page) and to be able to go back (this is ok with a push page but not with a rootpage).
So for me this type of page should be push and not a root page but how repear side menu on this type of page?
Thank you.
EDIT:
What about using persistent="true" in your ion-menu item? Like you can see in Ionic2 docs:
Persistent Menus Persistent menus display the MenuToggle button in the
NavBar on all pages in the navigation stack. To make a menu persistent
set persistent to true on the element. Note that this will
only affect the MenuToggle button in the NavBar attached to the Menu
with persistent set to true, any other MenuToggle buttons will not be
affected.
So your app.html woul be:
<ion-menu [content]="content" persistent="true">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button menuClose ion-item (click)="logout()">Logout</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
I'm developing an ionic app on android. I'm facing a problem where back button doesn't show up when there's no page to go back.
For more detailed explanation:
Scenario 1: Button from side menu when click go to View B.
Scenario 2: Button from side menu to View A, then button from View A to View B.
Scenario 2 View B shows back button, since it has a previous page, but Scenario 1 doesn't have a previous page that's why it doesn't show the back button, How do I display the menu button if there's no back button?
Here's my code below:
<ion-view view-title="MY View">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button" type="submit"
ng-click="goEdit(data.ID)">Edit</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="has-header">
</ion-content>
</ion-view>
Additional Info:
When removing the <ion-nav-bar> it displays the menu button, but of course will no longer show back button and edit button. When I try putting ng-hide in <ion-nav-bar ng-hide="isMenu"> it doesn't show any nav-bar since it's hidden but from html inspect element it's still there but hidden only. Any work around on this?
If you set a page as a rootPage and also use menu in you will see menu button. when navigating to another page from root if you use navCtrl.push() back button will automatically be added to the pushed view.if you set second page as a rootPage again you will see menu button again.
But if you want to implement it yourself that is another thing.
also check this link
Consider customizing the navbar/toolbar only for the pages that needs it.
By having an ion-toolbar in the ion-header, it appears on top of the default ion-navbar. So it is a workaround to have a custom header bar with my close icon and my custom function gotoHome(). That's the best way i found to customize the 'navbar' for a particular page.
<ion-header>
<ion-toolbar>
<ion-buttons left>
<button ion-button icon-only (click)="gotoHome()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
...
</ion-content>
The same answer applies to this topic, for reference :
Ionic Change back button icon for one page only
I have an Ionic 2 app in which a user can go from home -> 'topic view' (which contains a back button to home and a side menu like so:)
<ion-menu id="itemHierarchy-{{_pageId}}" side="right" persistent="true" [content]="content">
//toolbar stuff
</ion-menu>
<ion-header>
<ion-navbar>
<button ion-button right menuToggle="itemHierarchy-{{_pageId}}">
<ion-icon name="list"></ion-icon>
</button>
<ion-title>name</ion-title>
</ion-navbar>
</ion-header>
<ion-content #topicView padding>
</ion-content>
I have a link in the 'topic-view' page which navigates to another 'topic-view' page (pushes it onto the stack via deeplinker), and in it the new side menu doesn't open. I presume this is because there are two 'topicView' 'ion-content' nodes in the stack, but these cant be assigned a dynamic ID so not sure how to fix it... anyone?