I have a tab layout and I'd like to hide a tab, but when I do that, the view will not show anything. I thought [show] was for the icon, not the view.
<ion-tabs #myTabs id="myTabs" [selectedIndex]="0">
<ion-tab tabTitle="Menu" [root]="menuPage" [rootParams]="clientParams" [show]="false"></ion-tab>
</ion-tabs>
^ this displays nothing but removing the [show]="false" makes the view appear like normal.
Is there a way to allow the view to be seen while removing the icon from the tab bar?
The first part of your question is confusing of what you are trying to do. But I will try to answer the part of "how to remove icon from tab bar"
Normally if you do not have the tabIcon property in the ion-tab tag there wont have any icon show.
However if the tab icon is still showing for you you can set tabsLayout to icon-hide to hide the icon.
<ion-tabs tabsLayout="icon-hide">
<ion-tab [root]="tab1Root" tabTitle="Home"></ion-tab>
</ion-tabs>
Reference:
https://ionicframework.com/docs/api/components/tabs/Tabs/
Related
I need your help. I recently started teaching Ionic, later I ran into a small problem. I use a bottom tab template for the menu. The problem is that in the ion-header I have an ion-back-button. This button works fine, but unfortunately, when you reload the page in the browser, this button disappears. How to make sure that the knpoka does not disappear? Thank you
<ion-header *ngIf="fullBox">
<ion-toolbar>
<ion-title>Details №{{fullBox.id}}</ion-title>
<ion-back-button slot="start" (click)="goBack()"></ion-back-button>
</ion-toolbar>
</ion-header>
goBack() {
this.router.navigate(['']);
}
The functionality of ion-back-button is based on the app's history. When you refresh as #NajamUsSaqib says your history is lost.
I can see you are giving some funcionality to ion-back-button with (click) attribute, but is not necesary for this component because that it's the main functionality of the button.
For your problem, you can replace the ion-back-button with a simple button and maintain the click method you are using. This should show always the button regardless of app's history.
Regards.
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?
I have a page called Matches and feeds. In the matches pages I have 3 tabs as below
<ion-tab [root]="tab1Root" tabTitle="Applied" id="active" #active></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Failed"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Saved"></ion-tab>
So when I navigate from feed page to matches page I want to navigate to the tab1Root tab. When from some other page I navigate or click on the matches page Then i want it to navigate to the tab1Root automatically and refresh the page. How can I do it? When I navigate from the feeds page to matches page I'm not getting the output which is present in my tab1Root IonViewDidEnter(). How can I solve this issue?
You should use ionViewWillEnter instead of ionViewDidLoad to reload a tab page every time the user enters this page.
To switch programmatically to another tab:
this.navCtrl.parent.select(0) //your tab index
I'm new to Ionic 3, and what I want to do it's to get the specified scenario:
I go to Tab 1, click on some Item in Tab 1 and go to a view of this item, If I now switch to Tab 2, when I go to Tab 1, the view showed should be the Tab 1 view, not the Item View for a Tab 1 element.
In ionic 1 I previously have used $ionicHistory.clearHistory() but seems now it's not available. I've tried several uses of NavController but seems I am not using it properly or where it means to be used. How can I accomplish this scenario? Also I want to disable the back button in the root Tab 1 view, like, I don't want to see any type of back button when I'm on this view, without any exception.
Thanks in advance!
if any content of some tab link to a new page . the tab should be in hidden state so add this attribute "tabsHideOnSubPages" to your tab tag.
example:
<ion-tabs>
<ion-tab [tabsHideOnSubPages]="true" [root]="tab1Root"></ion-tab>
<ion-tab [root]="tab2Root"></ion-tab>
<ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>
So in this case when the first tab has button link to another page the state of toolbar tabs will be in hidden state and thats will not happen for second and third tab because the value of "tabsHideOnSubPages" attribute is false by default.
I have 2 - 3 pages that are a child section within a page, similar to tabs. Logically the user would not expect to go back to the previous tab on the back click. As these are implemented as separate pages the user is taken back to the individual tabs and not to the main section.
How can I get the user back to a custom URL only for some pages?
When you go to a new tab, you could delete the previous one from history with :
$ionicHistory.removeBackView();
Docs
If you want to custom your back function in devices i recommend this:
$ionicPlatform.registerBackButtonAction(function,priority)
In that function you can use $state.go to redirect where ever you want.
Docs here
You can skip back navigation history by using ui-view instead of ion-nav-view component.
So if for example you were using:
<ion-tabs>
<ion-tab ui-href="state">
<ion-nav-view name="content"></ion-nav-view>
</ion-tab>
</ion-tabs>
You would turn it into:
<a ui-sref="state">Link</a>
<div>
<ui-view name="content"><ui-view>
</div>
It will require some more template layout changes but this should get you started. Basically if you use ion-nav-view you'll get history and ionic.view events, if ui-router only then just view changes.