I have these tabs at the bottom of my app
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="cloud-upload"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"> . </ion-tab>
</ion-tabs>
This works, if I click on the About tab, it navigates to that page and highlights that tab in the footer on which I just clicked.
But now I would like to have a button in my Home component which activates (moves to) the 'About' tab the same way as I just described above. At first this seems easy, something like
gotoAbout(): void {
this.navCtrl.push(AboutPage)
// or this.navCtrl.setRoot(AboutPage)
}
The this.navCtrl.push creates a back button in the header, which is not what I want, I don't need a stack, I simply want to go to the other tab.
So the this.navCtrl.setRoot(AboutPage) seems to work better, but none of them highlight the tab in the footer. How can I achieve this ?
Related
I am using ionic - angular application, where I created a separte tabs page as follows:
tabs.ts
// all imports are made
#Component({
templateUrl: 'tabs.html'
})
export class MyTabs {
tab1Root = 'AlarmPage'; // made ionic page. so deeplink is already created.
tab2Root = 'FormsPage'; // same as above comment.
constructor() {
}
}
tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="AlarmPage" tabIcon="alarm"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="FormsPage" tabIcon="information-circle"></ion-tab>
</ion-tabs>
AlarmPage.ts
// all imports are done
// Its an ionic page with deeplink
#IonicPage({
segment: alarm/:id
})
The url for alarm page is http://localhost:8100/#/tab-0/alarm/5aba3.
Issue: When navigatng this page from inside the app i.e from other pages the tabs page is visibe at the bottom, but when pasting this url in the browser's address bar the alarm page is visible with the same url but the Tabs page is not visible.
I want to make visible the Tabs page when accessing this page outside the app i.e pasting the url in the address bar of the browser.
Also when I refresh the page I can see the tabs for some time and then again the tabs become invisible.
In Ionic's official website, tabs just use for root element.
But I want to put some components with <ion-tabs> in the same level, such as:
<my-component></my-component>
<ion-tabs>
<ion-tab ...></ion-tab>
<ion-tab ...></ion-tab>
<ion-tab ...></ion-tab>
</ion-tabs>
Because each tab has its own stack, I don't want to use other component instead of it.
How I can do this?
when I am writing ionic tabs [ion-tabs] then I use the class "tabs-positive tabs-icon-top"
nut when I run run it and inspect the element from Chrome I see there are some extra class the like :"tabs-top tabs-striped"
Here is my code
<ion-tabs class="tabs-positive tabs-icon-top">
<!-- Home Tab -->
<ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Man Tab -->
<ion-tab title="Man" icon-off="ion-man" icon-on="ion-man" href="#/tab/man">
<ion-nav-view name="tab-man"></ion-nav-view>
</ion-tab>
<!-- Woman Tab -->
<ion-tab title="Woman" icon-off="ion-woman" icon-on="ion-woman" href="#/tab/woman">
<ion-nav-view name="tab-woman"></ion-nav-view>
</ion-tab>
</ion-tabs>
And here is what I get in chrome
<ion-tabs class="tabs-positive tabs-icon-top pane tabs-top tabs-striped" nav-view="active" style="transform: translate3d(0%, 0px, 0px);"><div class="tab-nav tabs">
Is there any way to avoid these unexpected Css class insertion.
I use Ionic Framework and I'm using tabs as main navigation. I have the following HTML
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Home Tab -->
<ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/home">
<ion-nav-view name="tab-home"></ion-nav-view>
</ion-tab>
<!-- what if I want to add 9 more tabs here? -->
</ion-tabs>
What if I want to have 10 tabs? Then I want the default iOS behaviour, which is to show 4 first tabs, a "More" tab, which upon click, shows the rest of the tabs in a list.
Is this possible in ionic?
Currently, not possible be default. One could either write a plugin to add this functionality, but the framework it self does not have it baked in.
i'm trying to make work navigation with tabs.
here is a jsfiddle with the issue:
http://jsfiddle.net/brayancastrop/fgcruwxg/1/
I have a tabbed view that loads without back button or transition.
<script type="text/ng-template" id="templates/conference.html">
<ion-tabs tabs-type="tabs-icon-only" has-header=true padding=true>
<ion-tab title="Info" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" href="#/events/1/conferences/1/information">
<ion-nav-view name="conferenceInformation"></ion-nav-view>
</ion-tab>
<ion-tab title="Presentation" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline" href="#/events/1/conferences/1/presentation">
<ion-nav-view name="conferencePresentation"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
Right now when i go to an event the back button appears correctly in the nav bar, but when i go to a conference, the back button does not appear neither the transition animation.
Maybe i'm using wrong the tabs or missing something on the abstract state but i've tried using hide-back-button in the ion-view for each tab and tried to debug if history has something to do without luck :/
Please, any guidance will be apreciated.
Looks like you have your <ion-nav-view name="conferenceInformation"></ion-nav-view> nested inside your ion-tabs, which won't work. I think it needs to be above the ion-tabs directive.
Change this:
<script type="text/ng-template" id="templates/conference.html">
<ion-tabs tabs-type="tabs-icon-only" has-header=true padding=true>
<ion-tab title="Info" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" href="#/events/1/conferences/1/information">
<ion-nav-view name="conferenceInformation"></ion-nav-view>
</ion-tab>
<ion-tab title="Presentation" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline" href="#/events/1/conferences/1/presentation">
<ion-nav-view name="conferencePresentation"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
to this:
<script type="text/ng-template" id="templates/conference.html">
<ion-nav-view name="conferenceInformation"></ion-nav-view>
<ion-tabs tabs-type="tabs-icon-only" has-header=true padding=true>
<ion-tab title="Info" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" href="#/events/1/conferences/1/information">
</ion-tab>
<ion-tab title="Presentation" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline" href="#/events/1/conferences/1/presentation">
<ion-nav-view name="conferencePresentation"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
Updated jsfiddle