I have a simple app which always starts up a dashboard. This is the initial page where the user has an overview over the current state.
From there he navigates to modules using direct links on the dashboard itself or the given side menu.
In every module there should be a back-button visible to reach the dashboard. Whenever the user navigates from Module A to Module B (using the side-menu, which is always available!) the back-button should not navigate back to Module A, it should target the dashboard...
Here a sketch how it should be:
Red: Expected back navigation from view
Blue: Possible navigation on
screen
Blue (dotted): Possible Navigation using the side menu
Is there any way to archive this?
Yes it's possible. The easiest way to achieve this is to just forget (disable) the Ionic default back button and place one of your own in there. Have a abstract controller for the whole app or make your own for the header or where ever you would like the back button to be (a place where to place the controller code). For example:
HTML:
<button class="button button-clear header-item" ng-click="goToDashboard()">
<i class="icon ion-android-arrow-back"></i>
</button>
Controller:
$scope.goToDashboard = function() {
$state.go('dashboard');
};
Here is a simple Codepen about the solution: https://codepen.io/thepio/pen/GqvvjA?editors=1010
In this example you can just navigate to different tabs through the content and then navigate back to dashboard with the arrow on the left top corner.
Related
So I want to create a modal-like behavior for the search.
When the ion-searchbar is focused, a modal would slide from the bottom showing search history, which would hold the suggestion once the user starts typing. The problem with ionic nodals is the backdrop, I couldn't keep the ion-searchbar active to input search words.
This component is called Popover, you can create them pretty much like you do with a modal but using an PopoverController instead. The PopoverController.create() method has an event parameter that will tell which element will be the anchor for the popover, set that to your search bar and it should be magically aligned.
By default a backdrop is shown when the popover is created but it can be deactivated via showBackdrop property upon creation.
Take a look at the Ionic's Popover API Docs for further information
I ended up by using segments, as below:
<div *ngIf="segment == 'prodSection'">
...
</div>
<div *ngIf="segment == 'searchSection'">
...
</div>
I styled the two divs in a way to be on top of each other and added events to the searchbar like:
<ion-searchbar (ionFocus)="openSearch()" (ionCancel)="retProd()"></ion-searchbar>
And toggeled between the segments with setting the segment variable's value with each event.
I am creating a simple dashboard in ionic that consists of a toolbar at the top and a collapsible menu (navigation bar)on the left side. The menu is toggled by the menu button in the toolbar, but clicking the standalone 'div' component is also causing the menu to hide.
<ion-content>
<ion-menu type="push" menuId="nav-menu">
// create menu items
</ion-menu>
<div main>
hello world
</div>
</ion-content>
I expect the menu to remain open/unchanged when clicking on the hello world.
This is the normal behaviour and not configurable:
ionic/menu.tsx at master · ionic-team/ionic
I think you should maybe explore split-pane if you want to keep the menu open:
ion-split-pane - Ionic Documentation
But even then I think you will need to add your own toggle button to all the "desktop" menu to be optionally collapsed.
This tutorial shows how to set it up with a menu in Angular:
Split Pane in Ionic ← Alligator.io
And I think this bit is where you would need to add your own toggle code:
<ion-split-pane [when]="checkSize()">
<!-- ... -->
</ion-split-pane>
The tutorial is giving you it from the point of view of size changes, but I think you could wire this into a toggled bool from your own menu button?
In my page i use this:
this.navCtrl.push(HomePage);
Automatically generated back button
but a back button will automatically be added to the pushed view, how to use default bar?
If you do not want the Back button to be shown as an option you could simply hide it on the page in which you are navigating to.
<ion-navbar hideBackButton="true"></ion-navbar>
More info on Ionic NavBar here.
If you don't want to have the back button then you can set it as a root page using "setRoot()" instead of push() like this,
this.navCtrl.setRoot(HomePage);
just try this it work great for me it will be automatically deactivate back button and show Menu toggle
this.childNavCtrl.setRoot(HomePage);
I have an application which contains generated code for ion-nav-view. When I remove the code, the entire app disappears. I want to get rid of the arrows generated by ion-nav-view. Is there a way to do this without throwing away the entire app? I just want a view without the extra nav buttons.
The answer is that a button bar child element which was an href styled as a button, i.e.
<a href="/page1" class="button">
was being parsed and displayed into the topmost and bottom most region as part of the ion-nav-bar. The solution, in my case was to remove the anchor styled as a button in another part of the app, and the phantom objects at top of page and bottom of page go away.
I'm not sure what that magic logic was supposed to achieve, but I'm not a fan.
I am using Coda-Slider for my website and I want to know if there is a way to change the content of each tab. For example, the user navigates onto tab2 where I placed a link to redirect the user to another page. Is there a way NOT to navigate away from the page nor the tab but instead load the link inside the tab? I was thinking it would look something like a modal box that would stay inside the tab instead of popping up.
see 19. Coda-Slider Sliding Tabs or you might want to try 35. JQuery IDTabs if you want the effect to be non-intrusive